Wie jquery Ereignisse erneut zu binden über Ajax Inhalt geladen dies für jedes Ereignis/Klasse OHNE tun

So habe ich diese jquery-App, wo ich binden:Wie jquery Ereignisse erneut zu binden über Ajax Inhalt geladen dies für jedes Ereignis/Klasse OHNE tun

eine „delete-Funktion“ auf alle meine“.btn -delete "Elemente
ein "Add-Funktion" auf alle meine" .btn-add“Elemente

und so weiter. Innerhalb eines div meiner webapp bin ich asynchrones Laden von Inhalten, einschließlich Elemente, die ich an die Funktionen "löschen" und "hinzufügen" binden möchte. Diese Elemente haben auch eine "btn-delete" - oder "btn-add" -Klasse - aber da der Inhalt asynchron geladen wird, sind die Ereignisse nicht an sie gebunden, ohne etwas dagegen zu tun.

Also habe ich gehört, dass mit der .on ('click' ...) Funktion, die direkt nach dem Laden des Inhalts asynchron ausgelöst werden kann, ich diese Funktionen erneut binden kann. Aber ich müsste das für jede Funktion machen, die ich benutzen möchte. Das will ich nicht.

Was ich möchte, ist eine generische Funktion, die alle zuvor definierten Event-Funktionen an jedes Element innerhalb des Div-Container bindet, in dem ich sie geladen habe.

Gibt es eine Möglichkeit, etwas zu tun wie:

„alle in div-id xyz asynchron geladen Elemente Event-Funktionen erneut binden“ Es wäre mein Leben so viel einfacher machen, wenn ich nicht muss jede Funktion bei jedem Callback manuell neu binden.

Quelle

2013-10-25 michl_sof

Wenn Sie delegierte Ereignisbehandlung verwenden, müssen Sie nie erneut binden.

$('body').on('click', '.btn-delete', function(ev) { 
    // delete ... 
});

, dass ein Ereignishandler einrichtet, die „Klick“ Ereignisse fällt, wenn sie sprudeln, um den Körper von jedem Element, jederzeit. Es wirkt auf jeden "Klick" von einem Element, das dem angegebenen Selektor entspricht. Ob der Button ursprünglich da war oder dynamisch hinzugefügt wurde, spielt keine Rolle.

Sie müssen die Handler nicht auf das Element <body> setzen; Sie können auf jeder Behälterschicht gehen.

Quelle

2013-10-25 15:12:36 Pointy

Beeinträchtigt dies nicht die Leistung? –

@HamedMomeni nein, es gibt kein bedeutendes Leistungsproblem mit delegierten Event-Handlern. Der Selektor muss nur für jeweils ein DOM-Element getestet werden. – Pointy

Wie jquery Ereignisse erneut zu binden über Ajax Inhalt geladen dies für jedes Ereignis/Klasse OHNE tun

Antwort

Verwandte Themen