After filtering content, jQuery does not work

0

I made a code listing database items with PHP (using data-id for jQuery to "read" the click), but when you filter the items using Ajax, click it to work.

PHP

while ($furni = $furnis->fetch_assoc()) {
     echo '<img src="./web-gallery/images/furnis/small_' . $furni['image'] . '" data-id="'.$furni['id'].'" />';
}

jQuery (full: link )

success: function (e) {
     $(".small_items").html('');
     for (var i = 0; i < e.array.length; i++) {
          $(".small_items").append('<img src="./web-gallery/images/furnis/small_' + e.array[i].image + '" data-id="' + e.array[i].id + '" />');
     }
}

    
asked by anonymous 22.03.2015 / 14:53

1 answer

1

Replace this line:

$('.small_items img').on('click', function () {

by this:

$('.small_items').on('click', 'img', function () {

What is happening is that the images receive an event dropper when you run that line I mentioned above. But then you remove the contents of .small_items with $(".small_items").html(''); and this removes the event handlers ( event writers ).

So you have to use delegation for the event observer to be tied to .small_items which is always present on the page, and only at the moment of click it will check if it is a img element for trigger the event or not.

    
22.03.2015 / 16:42