jquery .on click esemény nem mindig működik

Van egy honlap, ahol ajax hívásokkal változtatom meg a tartalmat. A $(document).ready függvényen belül szerepelnek ilyen eseményhozzárendelések:

Kód:

---

$(document).on("click", "#submit_button", function(e){
        e.preventDefault();
        e.stopPropagation();
        // tartalom
    });

---

Valamiért a kattintás esemény az elemekre az esetek 90%-ában működik, viszont máskor akár 4-5 kattintás is kell a gombra, mire végrehajtja a hozzárendelt műveletet.

A kattintás viszont eljut hozzá, mert a CSS-beli változás látszik:

Kód:

---

div#submit_button:active {
        top: 2px;
}

---

jQuery 1.11 alatt, tesztelve Win10-en, Win7-esen, Firefoxban, de még iPad-en is előjön a hiba. Van valakinek ötlete?

A document-re bindingols az a legfelsőbb elem, tehát ott már nincsen amit megállítani, propagation szempontjából.

Próbáld meg a $("#submit_button").closest('form').on('submit', function(e) {
});

Vagy ha a formodnak van id je akkor csak $('#form_id').on('submit', function(e){} );

Azzal is számolj, hogy az AJAX hívásnak le kell futnia, ha rákattintasz a gombra, és nem történik semmi, lehet, hogy csak lassan válaszol a szerver éppen, és Te jó gyorsan még kattintasz négyet, erre "lefut" - valójában az elsőre indult el, csak lassan futot le. Érdemes AJAX-nál tudatni a felhasználókkal valahogy, hogy épp töltődik a tartalom (pl. megfelelő gif-et odapakolni).

Idézet:

---

0xFF eredeti hozzászólása

A document-re bindingols az a legfelsőbb elem, tehát ott már nincsen amit megállítani, propagation szempontjából.

Próbáld meg a $("#submit_button").closest('form').on('submit', function(e) {
});

Vagy ha a formodnak van id je akkor csak $('#form_id').on('submit', function(e){} );

---

Lehet, hogy rosszul értelmezem, de ez nem egy 'submit' eseményre reagáló bindelés? Én egy gombra (divre) kattintásra szeretnék reagálni.

Idézet:

---

Emphus eredeti hozzászólása

Azzal is számolj, hogy az AJAX hívásnak le kell futnia, ha rákattintasz a gombra, és nem történik semmi, lehet, hogy csak lassan válaszol a szerver éppen, és Te jó gyorsan még kattintasz négyet, erre "lefut" - valójában az elsőre indult el, csak lassan futot le. Érdemes AJAX-nál tudatni a felhasználókkal valahogy, hogy épp töltődik a tartalom (pl. megfelelő gif-et odapakolni).

---

Igen, így csinálom, a tartalom rész egyből egy animáció megjelenítésével kezdődik - de ez sem jelenik meg. Illetve a fejlesztői eszközöknél is látom a hálózat résznél, hogy a sikertelen kattintásokra nem történik semmi.

Idézet:

---

wzol eredeti hozzászólása

Lehet, hogy rosszul értelmezem, de ez nem egy 'submit' eseményre reagáló bindelés? Én egy gombra (divre) kattintásra szeretnék reagálni.

---

Lehet, hogy a konkrét kód arra vonatkozik, de a lényeg abban van, amit írt. Így:
$("#submit_button").click() vagy .on("click") sokkal hatásosabb, mintsem az egész document-re bindolni az eseményfigyelést, és abból leválogatni.
https://api.jquery.com/click/

Értem, így már tisztább. Viszont most már kicsit az API okozza a fejtörést :pff) miszerint azt írja: ".click() method is just a shorthand for .on( "click", handler )"

Amikor a $(document).ready nálam lefut, akkor még nem létezik #submit_button, az később jön egy ajax hívás eredményeként. Erre volt régen jó a .live, hogyha jól tudom, hogy a menet közben létrejött elemek bindelése egyszerű legyen. Ezt váltotta most az .on - viszont ha a .click() az .on "rövidítése", akkor a sima $("#submit_button").click() is tökéletes nekem, mindegy hogy mikor hozom létre az elemet?

Szerintem használhatod, mert a .click ugyan az mint az on("click"). De ha akarod, használd az .on-t, igazából tökmindegy, a lényeg, hogy ne a teljes dokumentumra bind-olj, hanem az adott elemre.

Most már kipróbáltam, mert nagyon messzire mentünk. :)

Tehát:

https://jsfiddle.net/2n4vcg00/ - $("div.btn").on('click', function() {});
https://jsfiddle.net/heaotdL8/ - $("div.btn").click(function() {});

valóban ugyanazok, nem működnek a később létrehozott elemekre.

https://jsfiddle.net/bckn81oL/ - $(document).on("click", "div.btn", function() {});

ez működik a később létrehozott elemekre.

Én ez utóbbit használom, tehát elvileg lehet kattintani bármelyik később létrehozott elemre, de a gyakorlatban 10-ből 8-9-szer működik, néha meg még egyszer (vagy akár ötször is) rá kell kattintani ugyanoda, hogy érzékelje a kattintást.

Idézet:

---

wzol eredeti hozzászólása

Én ez utóbbit használom, tehát elvileg lehet kattintani bármelyik később létrehozott elemre, de a gyakorlatban 10-ből 8-9-szer működik, néha meg még egyszer (vagy akár ötször is) rá kell kattintani ugyanoda, hogy érzékelje a kattintást.

---

Nálam 30-ból 30-szor működött hibátlanul, úgyhogy a hiba az ön készülékében van.
Amúgy azt lehet még megpróbálni, hogy új buttont hozol létre, és a bindingot is akkor rakod ki, pl. egy új script elem készítésével.