Verwenden des domsubtreemodifizierten Mutationsereignisses.in jQuery

Question

Ich habe den folgenden Abfragecode auf meiner Seite verwendet und unter Chrome funktioniert alles einwandfrei.Aber wenn ich die entsprechende Seite in Firefox öffne, erhalte ich den nicht reagierenden Skriptfehler.

Ich weiß, dass gemäß DOM3-Spezifikation die Mutationsereignisse veraltet sind.Aber trotzdem, wenn mir hier jemand helfen könnte, bin ich dankbar.

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

            });
 });

Entsprechendes HTML ist:

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

Answer 1

Es sieht aus wie in Firefox, der Aufruf an .slideToggle() löst die DOMSubtreeModified ereignis, während dies in Chrome nicht geschieht.Grundsätzlich löst also in Firefox zunächst etwas das Ereignis aus, das Ihren Klick-Handler bindet.An diesem Punkt ist alles gut.Wenn Sie dann mit dem Klicken fortfahren, wird die slideToggle passiert wie erwartet.Dadurch wird jedoch das DOMSubtreeModified Ereignis DOMSubtreeModified und Sie erhalten dann zwei Klick-Ereignishandler, die beide ausführen slideToggle weil sie jetzt zweimal registriert waren.Das nächste Mal, wenn Sie klicken, ist, wenn die Endlosschleife passiert.Grundsätzlich werden die Mehrfachklickereignisse immer wieder ausgelöst DOMSubtreeModified das registriert mehr Klick-Handler, was mehr macht slideToggles passieren, was mehr auslöst DOMSubtreeModifieds und so weiter und so fort.Um dies zu beheben, können Sie jQuery verwenden .one was Ihrer Seite sagt, dass sie nur das abfeuern soll DOMSubtreeModified handler einmal, was diese Schleife verhindert.Wenn dies keine geeignete Lösung ist, müssen Sie sich nur einen anderen Weg einfallen lassen, um sicherzustellen, dass die .click handler werden nicht mehr als einmal gebunden.

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

Schau dir das an JSFiddle - es benutzt .one aber das konnte ich bei der Verwendung überprüfen.on ist das Problem in Firefox und nicht in Chrome aufgetreten.

Answer 2

Nun, dies ist möglicherweise keine passende Antwort hier, da die Frage um Mutation-Ereignisse war, und der unten, der nachfolgend veröffentlicht wird, verwendet mutationobserver aber immer noch ich folge es, da einige dies finden könnennützlich.

Dies ist die Alternative, die ich für domsubreeereeMedifiziertes Ereignis verwendet habe, falls einige Knoten in der DOM hinzugefügt werden.

generasacodicetagpre.