CODEWITHSUNDEEP
javascriptjqueryajaxrequest
Simone
Simone

Reputation: 21272

Refresh jQuery code after AJAX request

Let's say, for example, that I have some buttons that calls AJAX requests when clicked.

$(document).ready(function(){
    $('button').each( function() {
        $(this).click( function() {
                    alert('Clicked.');
            // ...AJAX request...
        });
    });
});

When I click on a button, everything works fine.

But if I load the buttons with an AJAX request and then I click on them, the code above stops working.

How can I get rid of this?

I have tried the on() method

$(document).ready(function(){
    $('button').each( function() {
        $(this).on('click', function() {
                    alert('Clicked.');
            // ...AJAX request...
        });
    });
});

But it's just the same. Works normally, doesn't work on AJAX-loaded content.

I'm stuck, please help me.

P.S.: I am using the latest version of jQuery (v1.7.1).

Upvotes: 4

Views: 4457

Answers (5)

Mark Schultheiss
Mark Schultheiss

Reputation: 34178

I have a preference for the delegate in this intance.

$(document).ready(function(){ 
    $('body').delegate('button','click',function(){
       alert('Clicked.');
    });
});

Working example: http://jsfiddle.net/MarkSchultheiss/cKVGb/

some background discussion on delegate,live and bind: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

And, finally the .on() documentation so you might use that as well: http://api.jquery.com/on/

so you were ALMOST right! first already present buttons:

$(document).ready(function(){
    $('button').on('click', function() { 
      alert('Clicked.');
                     // ...AJAX request...
    });
});

now new ones (and old ones)

$(document).ready(function(){
    $('body').on('click', 'button', function() { 
      alert('Clicked.');
                     // ...AJAX request...
    });
});

Upvotes: 0

dku.rajkumar
dku.rajkumar

Reputation: 18568

try on.

$(document).ready(function(){
        $('button').on('click', function() {
                    alert('Clicked.');
            // ...AJAX request...
    });
});

and one loop will be enough , no need of each loop because on loop itself detect all the button elements and trigger on click event.

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You should do:

$(document).ready(function(){
       $('body').on('click','button', function() {
                    alert('Clicked.');
            // ...AJAX request...
        });
});

In this way is the body element that handles all the click event on the <button> elements and it works even if they are added through AJAX.

Instead of using the <body> tag you could use something that wraps those <button>...in any case read the docs of jQuery for on(), it's pretty straightforward.

P.S. in case you are wondering, live()works exactly as i used on(), jQuery just intercept events when they bubble up the DOM

Upvotes: 8

pap
pap

Reputation: 27614

Probably the safest (and least error-prone) approach is to bind the click-events AFTER you've loaded the buttons with AJAX.

Upvotes: 0

Mike
Mike

Reputation: 358

You have to set the click handlers after the buttons are already on the page. If you're doing it on page load, then the buttons loaded by ajax aren't there yet to accept the handler assignment.

Upvotes: 0

Related Questions