Ich erstelle dynamisch etwas Markup und injiziere es wie folgt in das DOM:
content+="<td><a class="reportLink" onclick="showReport();return false;" href=""+layerResults.features[i].attributes["Information_External"]+"">Info</a></td>";
Ich weiß, es wäre besser, jQuery zu verwenden, um den Click-Handler anzuhängen, anstatt einen Inline-Handler zu verwenden.
Die Probleme sind, sogar mit einem Inline-Handler und einer Funktion wie folgt:
function showReport() {
console.log("stopped");
}
Trotzdem verhindert der Link nicht das Navigieren von meiner Seite.
Das zweite Problem ist, wenn ich versuche zu verwenden
jQuery(".reportLink".on("click", function(e) {
e.preventDefault();
console.log("clicked");
});
Das Ereignis wird niemals angehängt. Ich benutze jQuery 1.7.2.
Das macht mich ein bisschen wahnsinnig, weil es eine einfache Aufgabe ist, die ich in jQuery <= 1.5 getan habe.
Antworten:
7 für die Antwort № 1Delegieren Sie den Ereignishandler an ein übergeordnetes Element, das zum Zeitpunkt des Ladens des Doms vorhanden ist. Sie können ersetzen body mit diesem Elternteil.
jQuery("body").on("click",".reportLink", function(e){
e.preventDefault();
console.log("clicked");
});
von jquery docs .auf()
Ereignishandler sind nur an das aktuelle gebundenausgewählte Elemente; Sie müssen zu dem Zeitpunkt auf der Seite vorhanden sein, zu dem der Code den Aufruf von .on () aufruft. Um sicherzustellen, dass die Elemente vorhanden sind und ausgewählt werden können, führen Sie die Ereignisbindung in einem Dokument-Ready-Handler für Elemente aus, die sich im HTML-Markup auf der Seite befinden. Wenn neuer HTML-Code in die Seite eingefügt wird, wählen Sie die Elemente aus und hängen Sie Ereignishandler an, nachdem der neue HTML-Code in die Seite eingefügt wurde. Oder verwenden Sie delegierte Ereignisse zum Anhängen eines Ereignishandlers, wie im Folgenden beschrieben.
Delegierte Ereignisse haben den Vorteil, dass sie es könnenverarbeitet Ereignisse von Nachkommenelementen, die dem Dokument zu einem späteren Zeitpunkt hinzugefügt werden. Indem Sie ein Element auswählen, das zum Zeitpunkt der Anbindung des delegierten Event-Handlers garantiert vorhanden ist, können Sie delegierte Ereignisse verwenden, um zu vermeiden, dass Ereignishandler häufig angefügt und entfernt werden müssen. Dieses Element kann beispielsweise das Containerelement einer Ansicht in einem Model-View-Controller-Design sein oder ein Dokument, wenn der Event-Handler alle blasenbildenden Ereignisse im Dokument überwachen möchte. Das Dokumentelement steht im Kopf des Dokuments zur Verfügung, bevor ein anderer HTML-Code geladen wird. Es ist also sicher, Ereignisse dort anzuhängen, ohne darauf warten zu müssen, dass das Dokument fertig ist.
Zusätzlich zu ihrer Fähigkeit, Ereignisse zu verarbeitenNachfahrenelemente, die noch nicht erstellt wurden, ein weiterer Vorteil von delegierten Ereignissen ist ihr Potenzial für viel geringeren Overhead, wenn viele Elemente überwacht werden müssen. In einer Datentabelle mit 1.000 Zeilen in seinem tBody fügt dieses Beispiel einen Handler an 1.000 Elemente an:
0 für die Antwort № 2
Um zu verhindern, dass es weg navigiert, geben Sie dieses direkt nach "console.log (" stopped ") ein;
return false;
Für den zweiten benutze ich normalerweise diese Syntax, vielleicht hilft es:
jQuery(".reportLink").click(function() {
//do something
});