jquery click doesn't work on ajax generated content

Question

I am using $(".button").on("click", function(){ });

to click to a button which is on a container but then an ajax call is done and the content gets updated with new stuff and then when i try to click .button it wont work... nothing will get returned when i click the button.

I even tried

$(".button").live("click", function(){ });

or

$(".button").click(function(){ });

How can I make it work?

EDIT : my html:

<div class="container">
   <ul>
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
   </ul>
   <input type="button" value="reload" class="button" />
</div>

And the rest of jQuery that attaches the listener. What you're describing is exactly what `live` is supposed to handle, so it's strange that that isn't working. — Brandan, Feb 18 '12 at 21:41
i have a ul where i click on them and simply echo "test" in javascript with .on("click") but when i click the button it will do an ajax call and reload the ul but then it will stop doing nothing when i click the button.. it wont return anything. — stergosz, Feb 18 '12 at 21:48

score 161 · Accepted Answer · edited Mar 11 '14 at 20:02

161

Should be done this way.

$('body').on('click', '.button', function (){
        alert('click!');
    });

If you have a container that doesn't change during the ajax request, this is more performant:

$('.container').on('click', '.button', function (){
        alert('click!');
    });

Always bind the delegate event to the closest static element that will contain the dynamic elements.

edited Mar 11 '14 at 20:02

Kzqai

22,588
25
105
137

answered Feb 18 '12 at 21:53

gdoron

147,333
58
291
367

Thanks for the answers! Still think this is very weird and doesn't feel allright to use this way. Wish jquery had a better way of handling these kind of situations – Miguel Stevens Mar 06 '14 at 13:12
1

@MiguelStevens, read [on's docs](http://api.jquery.com/on) once you read and understood the concept, it won't be weird and will make perfectly sense. – gdoron Mar 06 '14 at 14:05
But how would I write parent for this... $("input#someId").autocomplete({//some code});...there is no on event here.. – Dragon Oct 27 '15 at 13:59
1

@Sadaquat, I suggest writing a full question with all the required details in a different thread. If you won't get an answer, you can ping me with a comment and I'll try my best to help. – gdoron Oct 27 '15 at 14:14
i did the same but its not working..any suggestions? – Zaki Mustafa Apr 06 '17 at 14:34
1

Finally I found the solution I was looking for! Thank you sir – K. P. Apr 18 '19 at 14:28

score 41 · Answer 2 · answered Feb 18 '12 at 21:51

41

Ok i solved my problem by using the .on() function correctly since i was missing one parameter.

instead of

$(".button").on("click", function() { } );

i used

$(".container").on("click", ".button", function() { } );

answered Feb 18 '12 at 21:51

stergosz

5,754
13
62
133

1

Just a note, the [selector argument is not required](http://jsfiddle.net/62uSU/3/), but is necessary in this case. – Jared Farrish Feb 18 '12 at 21:57
Why is the selector argument not required, but necessary in this case? – ryentzer Oct 01 '13 at 19:31
I think it's because the selector is re-run in this case, but if not included it is not captured in the originally-run list of items grabbed with the selector. – Bing Feb 10 '14 at 05:01
@stergosz thanks man it really solved my tension. – Khadka Pushpendra Apr 12 '21 at 11:48

score 8 · Answer 3 · edited Apr 03 '13 at 17:50

8

Instead of:

$(".button").on("click", function() { } );

I used:

$(".container").on("click", ".button", function() { } );

I have used this and it worked.

edited Apr 03 '13 at 17:50

Flexo

87,323
22
191
272

answered Apr 03 '13 at 11:52

Macc

81
1
1

Jared Farrish · Answer 4 · 2012-02-18T21:54:30.150

Is this what you're trying to do? Note, I'm putting the $.on() on the parent, but selecting the .button for the action.

.on( events [, selector] [, data], handler(eventObject) )

selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

http://api.jquery.com/on/

<div id="stuff">
    <button class="button">Click me!</button>
    <p>Stuff</p>
</div>

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html();

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        $stuff.empty();
        console.log($stuff.html());
        alert($stuff.html()); // Look behind, #stuff is empty.
        $stuff.html(ajaxContent);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/1

Another demonstration:

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html(),
    $ajaxContent,
    colors = ['blue','green','red'],
    color = 0;

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        color++;
        if (color == colors.length) color = 0;
        console.log($stuff.html());
        alert($stuff.html());
        $ajaxContent = $(ajaxContent);
        $stuff.append($ajaxContent).css('color', colors[color]);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/2/

jquery click doesn't work on ajax generated content

4 Answers4

Linked

Related