jQuery binding click to a link after AJAX call

Question

I\'m getting furious - perhaps someone will be able to help me with this.

I need to re-bind the click to the link after AJAX call, but for some reason it doesn\'t wa

Answer 1

UPDATE on October 31, 2012

Starting from jQuery 1.7, the recommended approach is to use on -

$(document).on('click', '.active', function () {
    // click handler code goes here
});

---

Can you try the following ?

$('.active').live('click', function()
{
    // click handler
});

Answer 2

You would have to add the rebinding in the success handler if you want to execute it after the Ajax call:

success: function(data) {
    elem.replaceWith(data);
    $('.active').bind('click', /* some function needs to go here*/);
}

That said, in this case, live() or delegate() are probably better options [update: now that jQuery 1.7 is out, everything can be done with .on()]. This would also prevent double assignment of click handlers, in case you have other .active links that have not been replaced.

Update: Regarding your updated code: The way you are using live defeats its purpose. Please read its documentation. What you are doing is assigning a click handler when the the link is clicked, which means that you are adding click handlers over and over again.

This is an improved version of your code.

$('.active').live('click', function(event) {
    var elem = $(this);
    var url = $(this).attr('href');
     $.ajax({
         url: url,
         dataType: 'html',
         success: function(data) {
              elem.replaceWith(data);                             
         }       
     });    
     event.preventDefault();
     event.stopPropagation();
});