Kaip pridėti įvykius prie dinaminių html elementų?

Tarkime, kad turiu jQuery kodą, kuris prideda įvykių tvarkiklį visiems elementams su klasės "myclass". Pavyzdžiui:

 $(function(){ $(".myclass").click( function() { // do something }); }); 

Ir mano HTML gali būti toks:

 <a class="myclass" href="#">test1 <a class="myclass" href="#">test2 <a class="myclass" href="#">test3 

Jis veikia be problemų. Tačiau apsvarstykite, ar ateityje „myclass“ elementai buvo parašyti puslapyje.

Pavyzdžiui:

 <a id="anchor1" href="#">create link dynamically</a> <script type="text/javascript"> $(function(){ $("#anchor1").click( function() { $("#anchor1").append('<a class="myclass" href="#">test4'); }); }); </script> 

Tokiu atveju nuoroda „test4“ sukuriama, kai vartotojas spustelėja # anchor1.

Ryšyje „test4“ nėra su juo susijusio paspaudimo () tvarkytojo, nors jis turi klasę = "myclass".

Bet kokia idėja, kaip galiu tai išspręsti?

Iš esmės norėčiau vieną kartą parašyti paspaudimo () tvarkytoją ir taikyti jį tiek turinio, kuris yra įkeltas, ir turinio, kuris vėliau pridėtas per „Ajax / DHTML“.

450
31 авг. nustatyti frankadelic 31 d. 2009-08-31 22:29 '09, 10:29 val. 2009-08-31 22:29
@ 8 atsakymai

Pridedu naują atsakymą, kad atspindėtumėte vėlesnių jQuery versijų pakeitimus. .Live () metodas pasenęs nuo jQuery 1.7.

Nuo http://api.jquery.com/live/

Kaip ir jQuery 1.7, .live () metodas yra pasenęs. Naudokite .on (), kad pridėtumėte įvykių tvarkytojus. Senesnių „jQuery“ versijų vartotojai turėtų naudoti .delegate () .live () parinktyje.

Jei naudojate jQuery 1.7+, prie pagrindinio elemento galite pridėti įvykių tvarkyklę naudodami .on () ir perduoti selektorių kartu su „myclass“ kaip argumentą.

Žr. Http://api.jquery.com/on/

Taigi vietoj ...

 $(".myclass").click( function() { // do something }); 

Galite rašyti ...

 $('body').on('click', 'a.myclass', function() { // do something }); 

Tai veiks visiems žymenims su „myclass“ kūnu, kurie jau yra arba dinamiškai pridedami vėliau.

Čia naudojamas kūno žyma, nes pavyzdyje nebuvo arčiau supančio žyma, bet veikia bet kuri pagrindinė žyma, kuri egzistuoja skambinant .on metodu. Pvz., Sąrašo, kuriam bus pridėti dinaminiai elementai, „ul“ ženklas atrodys taip:

 $('ul').on('click', 'li', function() { alert( $(this).text() ); }); 

Tol, kol ul žymė yra, tai veiks (dar nėra elementų).

771
17 февр. atsakymą Sean pateikė vasario 17 d. 2012-02-17 18:37 '12 at 18:37 pm 2012-02-17 18:37

Kartais tai padaryti (atsakymas į viršutinį balsą) ne visada yra pakankamas:

 $('body').on('click', 'a.myclass', function() { // do something }); 

Tai gali būti problema, nes užsakymų įvykių tvarkytojai veikia. Jei pastebėsite, kad tai darote, tačiau tai sukelia problemų dėl tvarkymo tvarkos. Jūs visada galite perkelti ją į funkciją, kuri, kai ji vadinama, „atnaujina“ klausytoją.

Pavyzdžiui:

 function RefreshSomeEventListener() { // Remove handler from existing elements $("#wrapper .specific-selector").off(); // Re-add event handler for all matching elements $("#wrapper .specific-selector").on("click", function() { // Handle event. } } 

Kadangi tai yra funkcija, kai aš tokiu būdu steigiu savo klausytoją, paprastai jį vadinu pasirengęs dokumentui:

 $(document).ready(function() { // Other ready commands / code // Call our function to setup initial listening RefreshSomeEventListener(); }); 

Tada, kai pridėsite dinamiškai pridėtą elementą, dar kartą skambinkite šiuo metodu:

 function SomeMethodThatAddsElement() { // Some code / AJAX / whatever.. Adding element dynamically // Refresh our listener, so the new element is taken into account RefreshSomeEventListener(); } 

Tikiuosi, kad tai padės!

Sveiki,

65
15 июля '14 в 23:28 2014-07-15 23:28 atsakymą pateikė Chandler Zwolle, liepos 15 d. 14, 23:28 2014-07-15 23:28

Po jQuery 1.7 pageidaujami metodai . į () ir .off ()

Seano atsakymas rodo pavyzdį.

Dabar pasenusi:

Naudokite jQuery .live() ir .die() funkcijas. Galima įsigyti jQuery 1.3.x

Iš dokumentų:

Jei norite, kad kiekviename paspaudime būtų rodoma kiekvieno straipsnio dalis:

 $("p").live("click", function(){ alert( $(this).text() ); }); 

Be to, „ Livequery“ papildinys tai daro ir palaiko daugiau įvykių.

36
31 авг. Atsakyti Matt Brunell Rgp 31 2009-08-31 22:30 '09 10:30 val. 2009-08-31 22:30

Jei prie DOM pridėsite keletą rišimų, peržiūrėkite renginio delegaciją.

Štai paprastas pavyzdys:

 $('#somecontainer').click(function(e) { var $target = $(e.target); if ($target.hasClass("myclass")) { // do something } }); 
4
31 авг. Atsakymą pateikė ScottE rugpjūčio 31 d. 2009-08-31 22:39 '09 10:39 pm 2009-08-31 22:39

Susieja tvarkytoją su įvykiu (pvz., Paspaudimu) visiems elementams, atitinkantiems esamą ir būsimą. Taip pat gali susieti individualius įvykius.

nuorodos tekstas

 $(function(){ $(".myclass").live("click", function() { // do something }); }); 
3
31 авг. atsakymas duotas andres descalzo rugpjūčio 31 d. 2009-08-31 22:32 '09, 10:32 pm 2009-08-31 22:32

Vieno paspaudimo įvykį galite susieti su visų elementų puslapiu, neatsižvelgiant į tai, ar jie yra šiame puslapyje, ar jie bus rodomi ateityje, pavyzdžiui:

 $(document).bind('click', function (e) { var target = $(e.target); if (target.is('.myclass')) { e.preventDefault(); // if you want to cancel the event flow // do something } else if (target.is('.myotherclass')) { e.preventDefault(); // do something else } }); 

Jau kurį laiką naudojote. Veikia kaip žavesys.

JQuery 1.7 ir vėlesnėse .bind() rekomenduojame naudoti ne .on() o ne kitokį įvykių delegavimo būdą, bet .bind() vis dar veikia.

2
29 марта '13 в 6:09 2013-03-29 06:09 atsakymas duotas i - kovo 29 d., 13 val. 6:09 2013-03-29 06:09

Norite naudoti live() funkciją. Žr. Dokumentus .

Pavyzdžiui:

 $("#anchor1").live("click", function() { $("#anchor1").append('<a class="myclass" href="#">test4'); }); 
1
31 авг. atsakymą pateikė Adomas Bellaire 31 d. 2009-08-31 22:31 '09, 10:31 val. 2009-08-31 22:31

Jei naudojate jQuery 1.3+, gyvai ()

Susieja tvarkytoją su įvykiu (pavyzdžiui, paspaudimu) visiems dabartiniams ir būsimiems įvykiams - nuosekliam elementui. Taip pat gali susieti individualius įvykius.

1
31 авг. atsakymas pateikiamas redsquare 31 rug . 2009-08-31 22:31 '09, 10:31 val. 2009-08-31 22:31

Kiti klausimai apie „ etiketes arba Užduoti klausimą