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 want to work.

Here's my code:

if ($('.active').length > 0) {
    $('.active').click(function() {
        var elem = $(this);
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            dataType: 'html',
            success: function(data) {
                elem.replaceWith(data);                                                     
            }       
        });         
        $('.active').bind('click'); return false;           
    });
}

Any idea?

Thanks for the responses - I've amended the code, but the problem is still there:

function makeActive() {
    if ($('.active').length > 0) {
        $('.active').click(function() {
            var elem = $(this);
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                dataType: 'html',
                success: function(data) {
                    elem.replaceWith(data);                             
                }       
            }); 
            $('.active').live('click', makeActive);     
            return false;           
        });
    }
}


$('.active').live('click', makeActive);

MD Sayem Ahmed · Answer 1 · 2012-10-31T04:27:10.763

32

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
});

edited Oct 31 '12 at 04:27

answered Jan 30 '11 at 09:21

MD Sayem Ahmed

28,628
27
111
178

1

@SayemAhmed figured it out. `.live(arg, fn)` is succeeded by `.on(bind, arg, fn)`. I had overlooked the fact that the optional argument parameter for `.on` is where the class or id is placed for AJAX calls. As opposed to placing before the `.on` call such as in `.live`. Another [post](http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht) highlighted that the `.on` funciton must be bound to a static element with a child call. – The Thirsty Ape Jun 11 '13 at 14:37
I think this should be the accepted answer because it does not require binding the events every time you load new elements, as it captures all click (or whatever) events that bubble to document and filters the ones matching the selector. – ODaniel Nov 13 '14 at 13:11
`$('.active').on('click', function () { ` wasnt working for me but this solution `$(document).on('click', '.active', function () {` worked. – ewroman Jul 18 '15 at 21:29

Felix Kling · Accepted Answer · 2012-01-16T10:41:43.500

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();
});

jQuery binding click to a link after AJAX call

2 Answers2

Linked