.on() doesn't work properly with dynamic content

Question

I have a simple js script which gets backgrounds of the following elements:

    <ul class="vk_image_grid">
      <li style="background-image: url(https://name.com/image1.jpg)" class="block">
      </li>
      <li style="background-image: url(https://name.com/image2.jpg)" class="block">
      </li>
      <li style="background-image: url(https://name.com/image3.jpg)" class="block">
      </li>
     </ul>
<script>
 $("ul li").on( "click", function() {
  var bg = $(this).css('background-image');
  alert(bg);
</script>

It works perfectly with the first two li which are generated by php. But it doesn't show the background of the third li which is generateed by another jQuery script. How can I fix the issue?

Have you searched how to bind an event handler to dynamic element? Doesn't seem so. — nicael, Jun 04 '16 at 20:37
`on()` has 2 signatures. Pay close attention to the delegation target signature. Note that the main selector must exist and you add a target argument for delegating — charlietfl, Jun 04 '16 at 20:43

score -3 · Answer 1 · answered Jun 04 '16 at 20:38

-3

The third li element seems to be generated after the $("ul li") has been run. Therefore the event handler won't be attached to the third li element.

Either you make sure the li is generated before you iterate the li's to attach the event handler or you add the event handler in the method where you generate the new li element.

To help you more precisely you need to provide more details of your code.

answered Jun 04 '16 at 20:38

Sven Tschui

1,377
8
20

1

Bad answer. Should be a comment – Andrew Li Jun 04 '16 at 20:39
1

No need for more detail...event delegation handles both scenarios. Downvotes are for missing the obvious and more common delegation approach – charlietfl Jun 04 '16 at 20:40

.on() doesn't work properly with dynamic content

1 Answers1