jQuery <ul> 内容改变时调用jquery函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17830813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call jquery function when <ul> content change
提问by Jalpesh Patel
I try to call jQuery function when ul content is changed.
当 ul 内容更改时，我尝试调用 jQuery 函数。
Below is my code
下面是我的代码
JS
JS
jQuery(document).ready(function($) {
$('.ProductList').live('change', function() {
alert('content is changed now');
});
});
HTML
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.
我尝试根据内容更改调用函数，因为我从事 bigcoomerce 定制工作，而大型商业由于访问权限有限而不允许我访问 ajax 函数，因此我需要调用这样的函数。
采纳答案by A. Wolff
Test that: {this won't work if specific ajax request is set to global false}
测试：{如果特定的 ajax 请求设置为全局 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.
callback 是当 UL 的内容改变时要调用的函数。您应该直接从 ajaxStop 处理程序调用它，但通常我们使用自定义事件。
Or use that if you don't know what previous syntax means:
或者，如果您不知道以前的语法是什么意思，请使用它：
$('.ProductList').on('contentChanged',function(){alert('UL content changed!!!');});
回答by numediaweb
This is a bit late response but I share it for new devs facing same problem;
这是一个有点晚的回应，但我将它分享给面临同样问题的新开发人员；
Some might suggest using MutationEventsbut beware as this is being deprecated!
有些人可能会建议使用MutationEvents，但要小心，因为它已被弃用！
$('.ProductList').on('DOMSubtreeModified', function(event) {
// dos tuff
});
The recommended way is to use MutationObserverlike explained in this questionbut then beware that it is not supported in old browsers like IE8!
推荐的方法是使用MutationObserver就像在这个问题中解释的那样，但要注意它在像 IE8 这样的旧浏览器中不受支持！
回答by Sergio
<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
<Ul>没有更改事件，因为用户无法更改它，但是如果您使用 javascript 更新它的内容，您可以在更改后调用代码中的任何函数
回答by Lautaro Lorenz
$(document).on('DOMSubtreeModified', function (e) {
if ($(e.target).hasClass("select2-choices")) {
console.log("cambio");
alert("cambio");
}
});
回答by Akhil Sekharan
The ul element doesn't have onchange event like form elements.
ul 元素没有像表单元素那样的 onchange 事件。
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;
我确信 li 元素的内容会被代码中的某个函数改变。所以更好的方法是在该函数中发出一个事件并监听该事件；
May be this would help: Custom events in jquery
可能这会有所帮助：自定义事件在 jquery
回答by 20AMax
You can use setInterval(funcName, 1800)Check List each 1/2 second if ProductList is changed
setInterval(funcName, 1800)如果 ProductList 更改，您可以每 1/2 秒使用一次Check List
Example jsfiddle
示例jsfiddle
HTML
HTML
<ul class='ProductList List Clear'>
<li></li>
<li></li>
<li></li>
</ul>
JS
JS
function handleProductList(){
if(jQuery('ul.ProductList > *').size() !=="undefined"){
var ProductListNum = jQuery('ul.ProductList > *').size();
console.log(ProductListNum);
}
}
/* Check List each 1/2 second */
setInterval("handleProductList();", 1800);
回答by user1986444
$('.ProductList li').live('click',function()
{
alert('You just clicked a paragraph!');
});
