JQuery binden Änderung funktionieren nicht auf dynamische Inhalte

Ich möchte ein Änderungsereignis auf einem dynamischen Eingang Checkbox Element binden, aber es ist seltsam ...JQuery binden Änderung funktionieren nicht auf dynamische Inhalte

Dieser Code funktioniert:

$("form").on('change', 'input:checkbox.checkbox_main', function() { 
      console.log('change ok'); 
     });

Dieses don 't funktioniert:

$('input:checkbox.checkbox_main').on('change', function() { 
      console.log('change ok'); 
     });

Kann mir jemand erklären, warum?

Ich lese überall, dass die Bindefunktion in jquery v3.1 veraltet ist, was verwende ich für Ersatz? Was ist der beste Weg, um das Änderungsereignis auf einem dynamischen Kontrollkästchen abzufangen?

Quelle

2016-10-27 arno

Ja dies ist Ereignisdelegierung für mehr Referenz https://davidwalsh.name/event-delegate | http://javascript.info/tutorial/event-delegation –

Die 1.event ist bound auf dem form und die change auf alle Kinder Elemente ausgeführt wird, um die selector entsprechen. Wenn Sie also dynamische Elemente hinzufügen, werden diese abgefangen.

The 2.event passt die Elemente, die zur Zeit in der DOM sind derzeit von der selector ausführt. Also alle neuen Elemente werden nicht abgeholt werden.

EDIT

Wenn Sie ein dynamisches Menü wie dieses:

<ul id='topMenu'> 
    <li></li> 
</ul>

Und Sie möchten, dass alle Ereignisse auf ihre Kinder binden (einschließlich aller möglichen,) würde ich dies tun:

$('#topMenu').on('click', 'li', function() { 

});

Viele Menschen würden nur Stick auf das DOM $(document).on('click', '... aber Ich mag meinen Code klar und präzise halten also wähle ich immer den niedrigst möglichen übergeordneten Container

Quelle

2016-10-27 08:56:32 Ted

So, wie das Bind-Ereignis korrekt ersetzen? mit dem ersten Beispiel? – arno

@arno - Es hängt davon ab, welches 'Element' ** statisch ** auf Ihrer Seite ist. Ich finde immer den kleinstmöglichen Elterncontainer und binde die Ereignisse seiner Kinder daran. viele Leute benutzen immer das 'DOM', aber ich versuche ein bisschen schlauer zu sein. – Ted

document ist Container und gilt als DOM.

Wenn Sie versuchen, auf $('input:checkbox.checkbox_main').on('change') zuzugreifen, wird es nicht funktionieren, da jQuery nicht erkennen konnte, dass das HTML-Element zum Zeitpunkt document.ready verfügbar war.

$("form").on('change', 'input:checkbox.checkbox_main' Dies bindet das Ereignis speziell dynamisch an den Container für ein bestimmtes Element.

Weitere Spezifikation,

$('body') Ziele der <body> HTML-Element, während $(document) Ziele der gesamte HTML-Dokument. Das heißt, wenn Sie etwas in dem Element referenzieren möchten, das Sie von $(document) erhalten möchten.

FYI, ich nehme an, dass input:checkbox.checkbox_main Element in das DOM dynamisch hinzugefügt.

Quelle

2016-10-27 08:57:08

Ich lese überall, dass die Bindefunktion in jquery v3.1 veraltet ist. Was benutze ich für den Ersatz? – arno

'.on()' sollte verwendet werden. –

JQuery binden Änderung funktionieren nicht auf dynamische Inhalte

Antwort

Verwandte Themen