JQuery'de, hadisələri dinamik html elementlərinə necə əlavə etmək olar?

Bütün elementlərə "myclass" sinfi ilə bir hadisə işləyicisi verən jQuery kodu var. Məsələn:

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

Və mənim html belə ola bilər:

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

Problemsiz işləyir. Bununla yanaşı, "myclass" elementlərinin gələcəkdə səhifəyə yazıldığını düşünün.

Məsələn:

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

Bu halda, istifadəçi # anchor1 üzərinə tıkladığında "test4" bağlantısı yaradılır.

Sınıf = "myclass" olsa da, "test4" linkində bununla əlaqəli klik () işleyicisi yoxdur.

Bunu necə düzəldə biləcəyim barədə fikirlərimi?

Əsasən, klik () işleyicisini bir dəfə yazmaq və həm yüklənmiş məzmuna, həm də sonra Ajax / DHTML vasitəsilə əlavə olunan məzmuna tətbiq etmək istərdim.

450
31 авг. seti franqelelik 31 aug. 2009-08-31 22:29 '09 saat 10:29 'da 2009-08-31 22:29
@ 8 cavab

JQuery'nin sonrakı versiyalarında dəyişiklikləri əks etdirmək üçün yeni bir cavab əlavə edirəm. .Live () metodu jQuery-dən 1.7 etibarlıdır.

Http://api.jquery.com/live/ ünvanından

JQuery 1.7-də olduğu kimi, .live () metodundan istifadə edilmir. Tədbir işləyiciləri əlavə etmək üçün .on () istifadə edin. Köhnə jQuery versiyalarının istifadəçiləri .live () üstündəki (.) İstifadə etməlidirlər.

JQuery 1.7+ üçün, bir element işarəsi ilə .on () istifadə edərək üst elementə əlavə edə bilərsiniz və seçicini "myclass" ilə birlikdə arqument kimi keçir.

Http://api.jquery.com/on/ səhifəsinə baxın.

Bunun əvəzinə ...

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

Yaza bilərsiniz ...

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

Bu, bədəndə "myclass" ilə olan bütün etiketlər üçün işləyəcək və artıq dinamik olaraq əlavə olunur.

Bədənin etiketi burada istifadə olunur, çünki məsələnin ətrafında bir etiket yoxdur, ancaq .on metoduna zəng edərkən mövcud olan hər hansı bir ana etiket işləyəcək. Məsələn, dinamik elementlərin əlavə olunacağı siyahı üçün ul tag bu kimi görünür:

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

UL etiketinin olduğu müddətcə bu işləyəcək (hələ li elementlər yoxdur).

771
17 февр. Cavab 17 fevralda Sean tərəfindən verilir . 2012-02-17 18:37 '12 saat 18:37 'da 2012-02-17 18:37

Bəzən bunu (yuxarı səsin cavabı) hər zaman kifayət deyil:

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

Sifariş hadisə işləyiciləri işə yaradığından bu problem ola bilər. Bunu etdiyinizi görürsən, amma bunun emal olunduğu sıraya görə problem yaradır. Siz həmişə onu dinləyiciyə "yeniləyir" deyə çağıranda bir funksiyaya ötürə bilərsiniz.

Məsələn:

 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. } } 

Bu funksiya olduğundan, dinləyicimi bu şəkildə qurduğum zaman, adətən sənəd üçün hazır deyirəm:

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

Daha sonra dinamik əlavə element əlavə etdikdə, bu üsulu təkrarlayın:

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

Bu kömək edir!

Salam,

65
15 июля '14 в 23:28 2014-07-15 23:28 Cavab Chandler Zwolle tərəfindən 15 İyul 15 'da 23:28 2014-07-15 23:28

JQuery 1.7 sonra, üstünlük üsulları var . on ().off ()

Seanın cavabı bir nümunə göstərir.

İndi köhnəlmişdir:

JQuery .die().die() funksiyalarından istifadə edin. JQuery 1.3.x mövcuddur

Sənədlərdən:

Hər bir bəndin mətni hər klikdə göstərmək üçün:

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

Bundan əlavə, canlı skript plugin bunu edir və daha çox hadisəni dəstəkləyir.

36
31 авг. Cavab Matt Brunell 31 avqust 2009-08-31 22:30 '09 saat 22: 30-da 2009-08-31 22:30

DOM-a birbaşa bağlamalar əlavə etsəniz, hadisə heyətinə baxın.

Burada sadə bir nümunə var:

 $('#somecontainer').click(function(e) { var $target = $(e.target); if ($target.hasClass("myclass")) { // do something } }); 
4
31 авг. Cavab Scott E. tərəfindən 31 avqustda verilir . 2009-08-31 22:39 '09 at 10:39 pm 2009-08-31 22:39

Cari və gələcəklə uyğun olan bütün maddələr üçün işəgötürəni bir hadisə (məsələn, bir klik) ilə əlaqələndirir. Xüsusi hadisələri də bağlaya bilər.

link mətni

 $(function(){ $(".myclass").live("click", function() { // do something }); }); 
3
31 авг. cavab verildi andres descalzo 31 Avqust 2009-08-31 22:32 '09 at 10:32 pm 2009-08-31 22:32

Bir klik hadisəsini bu səhifədəki olub-olmamasından asılı olmayaraq və ya gələcəkdə görünəcək şəkildə bütün elementlər üçün bir səhifə ilə bağlaya bilərsiniz, məsələn:

 $(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 } }); 

Bir müddət istifadə. Bir cazibə kimi çalışır.

JQuery 1.7 və daha sonra, bağlama və ya hər hansı digər hadisə metodu metodu .bind() istifadə etməyi məsləhət görürük, amma .bind() hələ də işləyir.

2
29 марта '13 в 6:09 2013-03-29 06:09 Cavab verilir i - 29 Mart '13, 6:09 2013-03-29 06:09

live() funksiyasından istifadə etmək istəyirəm. Sənədlərə baxın.

Məsələn:

 $("#anchor1").live("click", function() { $("#anchor1").append('<a class="myclass" href="#">test4'); }); 
1
31 авг. cavab Adam Bellaire 31 avqustda verilir. 2009-08-31 22:31 '09 at 10:31 pm 2009-08-31 22:31

Əgər jQuery 1.3 + istifadə edirsinizsə, canlı ()

Bütün mövcud və gələcək hadisələr üçün bir işəgötürənə hadisəni (məsələn, bir klik) bağlayır - tutarlı bir element. Xüsusi hadisələri də bağlaya bilər.

1
31 авг. Cavab redsquare 31 aug tərəfindən verilir . 2009-08-31 22:31 '09 at 10:31 pm 2009-08-31 22:31

etiketləri ilə bağlı digər suallar və ya bir sual