Jalpesh Jalpesh - 1 month ago 14
HTML Question

Call jquery function when <ul> content change

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

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