Call jquery function when <ul> content change

Question

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

Below is my code

JS

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

        $('.ProductList').live('change', function() {
          alert('content is changed now');
        });
    });

HTML

<ul class='ProductList List Clear'>
call jquery function when content change here.
     <li></li>
     <li></li>
      <li></li>
</ul>

Suggest me some idea so I can solve it.

I am try to call function based on content change because I work on bigcoomerce customization and big commerce not allow me to access ajax function because of the limited access so I need to call function like that.

Answer 1

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 2

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!!!');});

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

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