<ul> 内容改变时调用jquery函数答案

【问题标题】：Call jquery function when <ul> content change<ul> 内容改变时调用jquery函数
【发布时间】：2013-07-24 10:03:00
【问题描述】：

我尝试在 ul 内容更改时调用 jQuery 函数。

下面是我的代码

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>

建议我一些想法，以便我解决它。

我尝试根据内容更改调用函数，因为我从事 bigcoomerce 定制和大型商务工作，由于访问权限有限，我不允许我访问 ajax 函数，所以我需要这样调用函数。

【问题讨论】：

stackoverflow.com/questions/9470931/…
api.jquery.com/change The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus. 所以.change() 不适用于无序列表...还有奇怪的警报信息？
问题是您的 UL 内容如何变化？
为什么这么多点赞，这个问题已经被回答过千遍了……
@Jalpesh ha，好的，第三方插件不允许您覆盖 ajax 请求。我会说使用像 .ajaxStop() 这样的全局 ajax 方法并在那里检查 UL 内容是否已更改

标签： javascript jquery html

【解决方案1】：

测试：{如果特定的 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 是当 UL 的内容改变时要调用的函数。您应该直接从 ajaxStop 处理程序调用它，但通常我们使用自定义事件。

如果您不知道以前的语法是什么意思，也可以使用它：

 $('.ProductList').on('contentChanged',function(){alert('UL content changed!!!');});

【讨论】：

是什么！在 function() 之前表示&谁调用了这个函数？
@user1692342 stackoverflow.com/questions/3755606/… 这在你缩小代码时很有用
感谢您的链接！没有意识到这一点。如何检查特定的 ajax 请求是否设置为全局 false？你能看看我在stackoverflow.com/questions/30544027/…中遇到的问题吗

【解决方案2】：

这有点晚了，但我将它分享给面临同样问题的新开发者；

有些人可能会建议使用 MutationEvents，但请注意，因为它已被弃用！

$('.ProductList').on('DOMSubtreeModified', function(event) {
    // dos tuff
});

推荐的方法是使用MutationObserver 就像在这个question 中解释的那样，但要注意它在IE8 等旧浏览器中不受支持！

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果 ProductList 发生变化，您可以每 1/2 秒使用一次setInterval(funcName, 1800) Check List

例如jsfiddle

HTML

<ul class='ProductList List Clear'>
     <li></li>
     <li></li>
      <li></li>
</ul>

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);

【讨论】：

这是一个肮脏的 hack，使用 setInterval() 可以更好地处理正常事件。

【解决方案5】：

$('.ProductList li').live('click',function()
{
    alert('You just clicked a paragraph!');
});

【讨论】：

【解决方案6】：

<Ul> 没有更改事件，因为用户无法更改它，但是如果您使用 javascript 更新它的内容，您可以在更改后调用代码中的任何函数

【讨论】：

【解决方案7】：

ul 元素不像表单元素那样具有 onchange 事件。

我确定 li 元素的内容会被代码中的某些函数更改。所以更好的方法是在该函数中发出一个事件并监听该事件；

这可能会有所帮助：Custom events in jquery

【讨论】：