Dołącz obsługę kliknięć do dynamicznie generowanego znacznika zakotwiczenia - javascript, jquery

Dynamicznie generuję znaczniki i wstrzykuję je do DOM w następujący sposób:

content+="<td><a class="reportLink" onclick="showReport();return false;" href=""+layerResults.features[i].attributes["Information_External"]+"">Info</a></td>";

Wiem, że lepiej byłoby użyć jQuery do dołączenia modułu obsługi kliknięć zamiast korzystania z modułu wbudowanego.

Problem polega na tym, że nawet przy użyciu wbudowanego modułu obsługi i funkcji takiej jak ta:

function showReport() {
console.log("stopped");
}

Nadal nie uniemożliwia odsyłania linku do mojej strony.

Drugi problem polega na tym, kiedy próbuję użyć

jQuery(".reportLink".on("click", function(e) {
e.preventDefault();
console.log("clicked");
});

Wydarzenie nigdy się nie przywiązuje. Używam jQuery 1.7.2.

To doprowadza mnie do szaleństwa, ponieważ jest to proste zadanie, które wykonałem około zillion razy w jQuery <= 1,5.

Odpowiedzi:

7 dla odpowiedzi № 1

Deleguj moduł obsługi zdarzeń do elementu nadrzędnego, który istnieje w momencie ładowania domeny. Możesz wymienić body z tym rodzicem.

jQuery("body").on("click",".reportLink", function(e){
e.preventDefault();
console.log("clicked");
});

z dokumentów jquery .na()

Program obsługi zdarzeń jest powiązany tylko z bieżącymwybrane elementy; muszą istnieć na stronie w momencie, gdy twój kod wywołuje funkcję .on (). Aby upewnić się, że elementy są obecne i można je wybrać, wykonaj powiązanie zdarzeń wewnątrz procedury obsługi gotowego dokumentu dla elementów znajdujących się w znacznikach HTML na stronie. Jeśli do strony wstukuje się nowy HTML, wybierz elementy i dołącz procedury obsługi zdarzeń po umieszczeniu nowego kodu HTML na stronie. Lub użyj delegowanych zdarzeń, aby załączyć procedurę obsługi zdarzeń, zgodnie z opisem poniżej.

Zdarzenia delegowane mają tę zaletę, że mogąprzetwarzaj zdarzenia z elementów potomnych, które są dodawane do dokumentu w późniejszym czasie. Wybierając element, który jest gwarantowany w momencie dołączania delegowanej procedury obsługi zdarzeń, można użyć delegowanych zdarzeń, aby uniknąć konieczności częstego dołączania i usuwania programów obsługi zdarzeń. Element ten może być na przykład elementem kontenera widoku w projekcie Model-View-Controller lub dokumentem, jeśli program obsługi zdarzeń chce monitorować wszystkie zdarzenia propagacji w dokumencie. Element dokumentu jest dostępny w nagłówku dokumentu przed załadowaniem dowolnego kodu HTML, więc bezpieczne jest dołączanie tam zdarzeń bez czekania, aż dokument będzie gotowy.

Oprócz zdolności do obsługi zdarzeń naelementy potomne nie zostały jeszcze utworzone, kolejną zaletą delegowanych zdarzeń jest ich potencjał do znacznie niższego obciążenia, gdy wiele elementów musi być monitorowanych. W tabeli danych z 1000 wierszy w tbody, przykład ten dołącza moduł obsługi do 1000 elementów:

---

0 dla odpowiedzi nr 2

aby uniemożliwić mu dalszą nawigację, wpisz to zaraz po „console.log („ stop ”);

return false;

po drugie, zwykle używam tej składni, może pomoże:

jQuery(".reportLink").click(function() {
//do something
});

---