Call jquery function when content change

Question

I try to call jQuery function when ul content is changed.

Below is my code

JS

jQuery(document).ready(function($) {

        $(\'.ProductList\         


        

Answer 1

$(document).on('DOMSubtreeModified', function (e) {
     if ($(e.target).hasClass("select2-choices")) {
          console.log("cambio");
          alert("cambio");
     }
});

Answer 2

The ul element doesn't have onchange event like form elements.

I'm sure that the content of the li element is change by some function in your code. So the better way is to emit an event in that function and listen for that event;

May be this would help: Custom events in jquery

Answer 3

<Ul> don't have change event, since user cannot change it, but if you update it's content with javascript you can call any function you have in your code after changing it

Answer 4

$('.ProductList li').live('click',function()
{
    alert('You just clicked a paragraph!');
});

Answer 5

This is a bit late response but I share it for new devs facing same problem;

Some might suggest using MutationEvents but beware as this is being deprecated!

$('.ProductList').on('DOMSubtreeModified', function(event) {
    // dos tuff
});

The recommended way is to use MutationObserver like explained in this question but then beware that it is not supported in old browsers like IE8!

Answer 6

Test that: {this won't work if specific ajax request is set to global false}

! function () {
    var ulContent;
    $(document).ajaxStop(function () {
        var $ul = $('.ProductList');
        if(ulContent !== $ul.html()){
            ulContent = $ul.html();
            $ul.trigger('contentChanged');
        }
    });
}();

$('.ProductList').on('contentChanged',callback);

callback is the function you want to call when content of UL changed. You should just call it directly from ajaxStop handler but usually we use a custom event.

Or use that if you don't know what previous syntax means:

 $('.ProductList').on('contentChanged',function(){alert('UL content changed!!!');});