vincolante evento click per elemento dinamico in JQuery - jquery

Ho un div che viene riempito dinamicamente dopo aver chiamato una chiamata AJAX tramite l'attributo .html

$("#gallery").html(imagesHtml);

insdie imagesHtml ho 2 pulsanti chiamati "prebtn" e "nxtbtn" ora sto cercando di associare questi pulsanti con la seguente sintassi in JQuery:

$("#gallery").bind("click", "#nxtbtn", function() {
alert("next");
});

e

$("#gallery").bind("click", "#prebtn", function() {
alert("previous");
});

ma più spesso clicco su uno dei pulsanti per attivare entrambi gli eventi e mostra allert per "next" e "previous"; tuttavia, ho fatto clic su uno dei pulsanti!

Per favore fatemi sapere se avete bisogno di ulteriori chiarimenti.

Grazie

risposte:

3 per risposta № 1

Stai confondendo il bind e on metodi. Sembrano simili, ma bind ha meno funzionalità: non supporta la delega degli eventi. Il secondo argomento non è il selettore per gli eventi delegati, ma a data discussione.

Questo funzionerà:

$("#gallery").on("click", "#nxtbtn", function() {

---

0 per risposta № 2

Penso che tu intendessi usare .on() anziché:

$("#gallery").on("click", "#nxtbtn", function() {
alert("next");
});
$("#gallery").on("click", "#prebtn", function() {
alert("previous");
});

Il bind() la funzione si collegherà all'elemento nel selettore iniziale, in questo caso #gallery. Quindi vincolerai entrambe le funzioni a quell'evento. Tecnicamente è anche questo .on() fa, ma usa il secondo argomento come filtro per l'elemento che ha attivato l'evento. Non penso .bind() questo, penso che il secondo argomento siano solo dati che le funzioni del gestore di eventi ignorano.

---

0 per risposta № 3

dovresti usare sopra invece di usare legare per farlo funzionare su elementi creati dinamicamente. Mentre e.preventDefault () impedirà il trigger di azione predefinito del rispettivo evento.

$("#gallery").on("click", "#nxtbtn", function(e) {
e.preventDefault();
alert("next");
});

e

$("#gallery").on("click", "#prebtn", function(e) {
e.preventDefault();
alert("previous");
});

---