Someone asked in jQuery plugin jk navigation about how to use jknav for dynamic contents:

I’m trying to combine it with an infinite page scroll for a blog, but I’m having a little trouble. […]

Do you know of any way to combine the two scripts, at all? No worries if you can’t help. Thank you.

I thought I had to modify jknav, but it turns out no need, I had almost forgotten how I wrote it. The items of navigation are stored after call $('selector').jknav(), you can add more items later, just call it again.

If your content is loaded using AJAX, then you can


$(function() {
  $.jknav.init({
      up: 'u',
      down: 'd',
      name: 'dynamic content',
      reevaluate: true
      });
  add_new_content();
  });

function add_new_content() {
  $('h4:not(.jknav)').jknav(null, 'dynamic content').addClass('jknav');
  window.setTimeout(add_new_content, 1000);
  }

add_new_content() will run every second to find new <h4> which is without CSS class jknav, once those new content added, they will be tagged with jknav class. If you don’t specify name when initialization $.jknav.init(), then it will just be $('h4:not(.jknav)').jknav().addClass('jknav'); if you do specify, make sure the names are matched.

Using setTimeout should be generally working for most of all since you don’t need to cooperate with dynamic loading functions. But if you know that part very well, say a callback function you can use to be notified about new content has been loaded, then you simply hook add_new_content with the callback hook and remove setTimeout because you won’t need to manually check once a while.

The following demonstration is similar to the code above, except it’s not AJAX. Use j and k to navigate, and click on the button to add more.