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.
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!
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!!!');});
<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
$(document).on('DOMSubtreeModified', function (e) {
if ($(e.target).hasClass("select2-choices")) {
console.log("cambio");
alert("cambio");
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With