Использование события мутации DOMSubtreeModified. в jQuery

я использовал следующий код jQuery на своей странице, и все отлично работает в chrome.Но когда я открываю соответствующую страницу в firefox, я получаю ошибку безответного скрипта.

Я знаю, согласно спецификации DOM3 события мутации были осуждены. Но все же, если кто-нибудь может мне помочь, я буду очень признателен.

jQuery('#term').on("DOMSubtreeModified",function(){
$("#term > .click-slide").click(function(){
            $(this).siblings().slideToggle();

            });
 });

соответствующий HTML:

<div class="btn-slide" id="term">
    <div class="click-slide">
      <button>Search Terms </button>
    </div>
    <div class="btn-box">
       <label><span>Novena</span></label>
    </div>
</div>
9
firefox html jquery mutation-events

2 ответов

похоже, что в Firefox вызов .slideToggle() вызывает DOMSubtreeModified событие, в то время как это не происходит в Chrome. Таким образом, в Firefox что-то изначально запускает событие, которое связывает ваш обработчик кликов. На данный момент все хорошо. Когда вы затем перейдете к щелчку,slideToggle происходит так, как ожидалось. Тем не менее, это запускает событие DOMSubtreeModified, а затем вы получаете два обработчика событий click, которые делают slideToggle потому что теперь они были зарегистрированы дважды. Следующий раз вы нажимаете, когда происходит бесконечный цикл. В основном несколько событий щелчка продолжают срабатывать DOMSubtreeModified который регистрирует больше обработчиков щелчка, что делает больше slideToggles произойдет, что вызывает больше DOMSubtreeModifieds, и так далее и тому подобное. Чтобы исправить это, вы можете использовать jQuery это .one который говорит Вашей странице только стрелять из этого DOMSubtreeModified обработчик один раз, что предотвращает этот цикл. Если это не подходящее решение, вам просто нужно придумать какой-то другой способ, чтобы убедиться, что .click обработчики не получают связаны не один раз.

jQuery('#term').one("DOMSubtreeModified",function(){   //Notice this is using .one and not .on

зацените JSFiddle - это с помощью .one но я смог проверить это при использовании .проблема произошла в Firefox, а не в Chrome.

14

Ну, это может быть не подходящий ответ здесь, так как вопрос был о мутация-события, и тот, который размещен ниже, использует Мутация-Наблюдателей но все же я отправляю это как некоторые могут найти это полезным.

это альтернатива, которую я использовал для DOMSubtreeModified событие в случае, если некоторые узлы добавляются в DOM.

var target = $( "#term" )[0];
// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
   mutations.forEach(function( mutation ) {
       var newNodes = mutation.addedNodes; // DOM NodeList
       if( newNodes !== null ) { // If there are new nodes added

        //alert('something has been changed');

      }
   });    
});

// Configuration of the observer:
var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
};

// Pass in the target node, as well as the observer options
observer.observe(target, config);
// Later, you can stop observing
// observer.disconnect();
13