0

I am currently trying to implement an on-click search event, using Simple-Jekyll-Search on a page with SmoothState.

After following the suggestion written in this question: How do you simulate a button press in Javascript, to trigger searching in Simple-Jekyll-Search, and adding the following snippet to the library, it appears the onClick event no longer triggers a the search event after SmoothState loads a new page.

$('#yourbutton').click(function(){
    render( searcher.search(store, opt.searchInput.value) );
})

Any suggestions would be appreciated.

Community
  • 1
  • 1
matchai
  • 311
  • 4
  • 10

1 Answers1

0

There's a section in the FAQ section of the README that might help. Here's the excerpt:

Help! My $(document).ready() plugins work fine when I refresh but break on the second page load.

smoothState.js provides the onAfter callback function that allows you to re-run your plugins. This can be tricky if you're unfamiliar with how AJAX works.

When you run a plugin on $(document).ready(), it's going to register only on elements that are currently on the page. Since we're injecting new elements every load, we need to run the plugins again, scoping it to just the new stuff.

A good way to do this is to wrap your plugin initializations in a function that we call on both $.fn.ready() and onAfter. You'll want to specify the context each time you initialize the plugins so that you don't double-bind them. This is called a "module execution controller".

Miguel Ángel Pérez
  • 67
  • 5