jQuery load question

Question

I'm using jquery load function to scroll between pages of a calender in my page. I'm using this function

$(document).ready(function(){
    $('a.cal').bind('click', function(e) {           
        var url = $(this).attr('href');
        $('div#calender').load(url); 
        e.preventDefault(); 
    });
});

to assign the behavior to anchors with the class "cal" which basically load the next and previous page of the calender into the calender's container, #calender.

Problem is the behavior works only ONCE. The div refreshes with the new content nicely the first time, but subsequent clicks of the next/prev buttons have it load a new page.

Can anyone help me out please?

My guess is that the above code assigns the behavior to the anchors with class 'cal' on the first load, but clicking on the next/prev button refreshes the calender in the div, and those nav buttons do not have the ajax behavior.

How can I fix this though... I would really appreciate your kind help.

Thanks.

Answer 1

Use live to ensure that the handler is bound to all current and future elements:

  $('a.cal').live('click', function(e) {           
      var url = $(this).attr('href');
      $('div#calender').load(url); 
      e.preventDefault(); 
  });

Answer 2

you could try using live("click"... instead of bind("click"...

live() uses event delegation whereas bind() attaches directly to the element, therefore when you create new elements that did not exist at the point of attaching the event handler, they do not get the event handler.

Answer 3

Rather than bind use live

$('a.cal').live( 'click', function(e) {
   // your same click handling
});

From the docs http://docs.jquery.com/Events/live#typefn

Binds a handler to an event (like click) for all current - and future - matched element

Which basically means that whenever new elements are added with the cal class they get your event handler bound to them automatically