jQuery does not work for appended data

Question

<ul id="myul">
<li id="myli1"></li>
<li id="myli2"></li>
<li id="myli3"></li>
.
.
.
.
<li id="myli15"></li>
</ul>

Assume that I have ul and I have some jquery methods for all myli selections and all work well.

But when I append new li to myul with my load more method, new li content's ajax buttons does not work but old li content's buttons are still working.

Could you tell me some reference or solution way. I have no idea, I don't know how to search for this problem.

You need to [delegate the event](http://api.jquery.com/on/#direct-and-delegated-events) — billyonecan, Jul 24 '15 at 20:44

score 1 · Accepted Answer · answered Jul 24 '15 at 20:48

1

This called delegation events. You assign only one event listener to parent (ul) and jQuery checks event target to be li for you under the hood.

$('ul').on('click', 'li', function() {
  var $li = $(this);

  //do stuff with li on click
});

answered Jul 24 '15 at 20:48

Denis

2,429
5
33
61

jQuery does not work for appended data

1 Answers1