Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 460
Jalpesh Patel Avatar asked Jul 24 '13 10:07

Jalpesh Patel


4 Answers

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!

like image 132
numediaweb Avatar answered Sep 29 '22 12:09

numediaweb


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!!!');});
like image 38
A. Wolff Avatar answered Sep 29 '22 11:09

A. Wolff


<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

like image 3
Sergio Avatar answered Sep 29 '22 12:09

Sergio


$(document).on('DOMSubtreeModified', function (e) {
     if ($(e.target).hasClass("select2-choices")) {
          console.log("cambio");
          alert("cambio");
     }
});
like image 3
Lautaro Lorenz Avatar answered Sep 29 '22 12:09

Lautaro Lorenz