Вызов функции jquery при изменении содержимого <ul>

Я пытаюсь вызвать функцию jQuery при изменении содержимого ul.

Ниже мой код

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 из-за ограниченного доступа, поэтому мне нужно вызвать такую функцию.

Ответ 1

Проверьте, что: {это не будет работать, если для определенного запроса 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);

callback - это функция, которую вы хотите вызвать при изменении содержимого UL. Вы должны просто вызвать его непосредственно из обработчика ajaxStop, но обычно мы используем настраиваемое событие.

Или используйте это, если вы не знаете, что означает предыдущий синтаксис:

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

Ответ 2

<Ul> не имеют события изменения, так как пользователь не может его изменить, но если вы обновите его содержимое с помощью javascript, вы можете вызвать любую функцию, имеющуюся в вашем коде, после ее изменения

Ответ 3

Элемент ul не имеет элементов onchange, таких как элементы формы.

Я уверен, что содержимое элемента li изменяется с помощью некоторой функции в вашем коде. Поэтому лучший способ - испустить событие в этой функции и прослушать это событие;

Возможно, это помогло бы: Пользовательские события в jquery

Ответ 4

Это немного поздний ответ, но я разделяю его для новых разработчиков, столкнувшихся с одной и той же проблемой;

Некоторые могут предложить использовать MutationEvents, но будьте осторожны, поскольку это устарело!

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

Рекомендуемый способ - использовать MutationObserver, как описано в этом question, но затем остерегайтесь, что он не поддерживается в старых браузерах, таких как IE8!

Ответ 5

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

Ответ 6

Вы можете использовать setInterval(funcName, 1800) Контрольный список каждые 1/2 секунды, если ProductList изменен

Пример jsfiddle

HTML

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

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

Ответ 7

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