Question

我尝试在更改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函数，因为访问受限，所以我需要调用这样的函数。

Answer 1

这是一个迟到的回应，但我分享面对同样问题的新开发者;

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

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

推荐的方法是使用MutationObserver中所解释的question，但请注意，IE8等旧浏览器不支持它！

Answer 2

测试：{如果特定的ajax请求设置为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);

回调是UL内容更改时要调用的函数。您应该直接从ajaxStop处理程序调用它，但通常我们使用自定义事件。

如果您不知道以前的语法含义，请使用它：

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

Answer 3

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

Answer 4

ul元素没有像表单元素那样的onchange事件。

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

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

Answer 5

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

Answer 6

如果更改了ProductList，您可以每1/2秒使用setInterval(funcName, 1800)检查列表

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

Answer 7

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

<ul>内容更改</ul>时调用jquery函数

7 个答案: