Anhängen von Ereignissen an dynamische html -Elemente in jQuery

Wenn Sie mit dynamisch geladenem Inhalt in Webanwendungen arbeiten und Ereignishörer anhängen, die möglicherweise nicht vorhanden sind, können Sie eine Herausforderung vorstellen. In diesem Artikel werden wir untersuchen, wie dieses Szenario mit der jQuery -Bibliothek effektiv behandelt werden kann. Mit dieser Klasse möchten wir allen Elementen einen Klick -Ereignis -Handler hinzufügen, unabhängig davon, ob sie beim Laden von Seite geladen oder dynamisch hinzugefügt werden. Anfangs können wir den folgenden Code verwenden:

$ (function () { $ (". MyClass"). Click (function () { // etwas mach }); }); Dieser Code funktioniert gut für vorhandene Elemente mit der ".

Methode, mit der wir Ereignishandler an Elemente binden, die in der DOM noch nicht existieren. Anstatt Ereignisse direkt an einen bestimmten Selektor anzuhängen, geben wir ein übergeordnetes Element an und verwenden eine Ereignisdelegation, um die Ereignisse für dynamisch hinzugefügte Nachkommen zu erfassen. // etwas mach });

$(function() {
    $(".myclass").click(function() {
        // Do something
    });
});

den Ereignishandler auslöst, unabhängig davon, ob das Element später auf der Seite geladen oder hinzugefügt wurde. Das

Element wird in diesem Fall als übergeordnetes Element verwendet, aber jedes statische übergeordnete Element, das existiert, wenn die . On () genannt werden kann. Code:

und der folgende JavaScript -Code:

$('body').on('click', 'a.myclass', function() {
    // Do something
});

When a user clicks the #anchor1 element, a new link with the ".myclass" class is dynamically generated. Thanks to the .on() event delegation, this dynamically created link will also respond to the click event handler, allowing us to handle events for both existing and dynamically added content effektiv. schlussfolgerung

indem wir die . on () Methode und Ereignisdelegation verwenden, können wir sicherstellen, dass Ereignishandler sowohl statisch als auch dynamisch generierte Elemente sicherstellen, und das Handling mit Seamless -Ereignis in komplexen Webanwendungen sicherstellen.