Dinamik şəkildə yaradılan elementlərə məcburi hadisə?

.hover bütün seçmə sahələrinə baxdığım və .hover hadisəsini birləşdirərək mouse on/off genişliyi ilə bir az gizlətmək üçün bir az .hover mouse on/off .

Səhifədə baş verən bu vəziyyət hazırdır və böyük işləyir.

Problem, başlanğıc döngdən sonra Ajax və ya DOM vasitəsilə əlavə etdiyim hər hansı seçmə sahələrinin hadisə ilə bağlı olmayacağıdır.

Mən bu plugin ( jQuery Live Query Plugin ) tapdım, amma plugin səhifələrimə daha 5 əlavə etməzdən əvvəl, hər kəs bunu doğrudan və ya başqa bir parametrdən istifadə edərək, necə edə biləcəyini görmək istərdim.

1678
15 окт. Eli tərəfindən 15 oktyabrda təyin olundu . 2008-10-15 02:25 '08 saat 02:25 'da 2008-10-15 02:25
@ 24 cavab

JQuery 1.7 ilə başlayaraq, jQuery.fn.on istifadə jQuery.fn.on :

 $(staticAncestors).on(eventName, dynamicChild, function() {}); 

Bundan əvvəl, live() istifadə etmək məsləhət görülür:

 $(selector).live( eventName, function(){} ); 

Bununla bərabər, live() 1.7 on() lehinə 1.7 əvəzsizdir və 1.9-da tamamilə silinir. İmza live() :

 $(selector).live( eventName, function(){} ); 

... ilə əvəz edilə bilər: on() imza:

 $(document).on( eventName, selector, function(){} ); 

dosomething dinamik olaraq sınıf dosomething adını dosomething bir etkinliğin zaten var olan bir dosomething bağlayacaksanız ( dosomething dinamik dosomething ), və ən asan seçim) document . Yadda saxlayın ki, document ən yaxşı seçimdir .

 $(document).on('mouseover mouseout', '.dosomething', function(){ // what you want to happen when mouseover and mouseout // occurs on elements that match '.dosomething' }); 

Bir hadisə ankrajında ​​mövcud olan hər hansı bir valideyn gözəldir. Məsələn,

 $('.buttons').on('click', 'button', function(){ // do something here }); 

tətbiq olunacaq

 <div class="buttons"> <!-- <button>s that are generated dynamically and added here --> </div> 
1929
30 июля '09 в 18:34 2009-07-30 18:34 Cavab dev.e.loper 30 iyul '18: 18' də 2009-07-30 18:34 'e verilir

jQuery.fn.on sənədlərinə jQuery.fn.on .

Qısacası:

Hadisə işleyicileri yalnız seçilmiş elementlərə bağlıdır; .on() bir .on() çağırış etdiyiniz anda səhifədə olmalıdır.

Beləliklə, aşağıdakı nümunədə #dataTable tbody tr kodu yaradılmadan əvvəl mövcud olmalıdır.

 $("#dataTable tbody tr").on("click", function(event){ console.log($(this).text()); }); 

Sayfada yeni bir HTML kodu girildiyse, aşağıda göstərildiyi kimi bir hadisə işleyicisini əlavə etmək üçün nümayəndəlik hadisələrini istifadə etmək üstündür.

border=0

Təqdim olunan hadisələr , daha sonra sənədə əlavə olunacaq soyunma elementlərindən hadisələri idarə edə biləcək üstünlüyə malikdir. Məsələn, bir tablo varsa, lakin satır dinamik şəkildə kodu istifadə edərək əlavə edilərsə, aşağıdakıları işləyəcəkdir:

 $("#dataTable tbody").on("click", "tr", function(event){ console.log($(this).text()); }); 

Hələ yetişməmiş uşaq elementləri ilə bağlı hadisələri idarə etmək qabiliyyətinə əlavə olaraq, nümayəndəlik hadisələrinin bir üstünlüyü çox elementlərin nəzarət edilməsinə ehtiyac duyulduqda əhəmiyyətli dərəcədə aşağı düşmə potensialıdır. 1000-dən çox sətirdə olan bir məlumat masasında tbody ilk kod nümunəsi bir işleyiciyi 1000 elementə verir.

Verilmiş hadisə yanaşması (ikinci kod nümunəsi) bir hadisə işleyicisini yalnız bir elementə verir və bir hadisə yalnız bir səviyyədə (basıldığından tr üçün) bir tbody .

Qeyd Verilən hadisələr SVG üçün işləmir.

323
09 авг. Cavab Ronen Rabinovici 09 avqustda verilir. 2013-08-09 12:51 '13 at 12:51 2013-08-09 12:51

Bu, heç bir kitabxana və plenar ilə təmiz bir javascript həllidir:

 document.addEventListener('click', function (e) { if (hasClass(e.target, 'bu')) { // .bu clicked // Do your thing } else if (hasClass(e.target, 'test')) { // .test clicked // Do your other thing } }, false); 

hasClass

 function hasClass(elem, className) { return elem.className.split(' ').indexOf(className) > -1; } 

Canlı demo

Kredit Dave və Sime Vidasın sahibidir

Daha müasir JS-dən istifadə edərək, hasClass aşağıdakı kimi tətbiq oluna bilər:

 function hasClass(elem, className) { return elem.classList.contains(className); } 
174
09 дек. Ram Patra tərəfindən verilmiş cavab 09 dekabr. 2014-12-09 10:59 '14 saat 10:59 'da 2014-12-09 10:59

Yaradıldığı zaman obyektlərə hadisələr əlavə edə bilərsiniz. Eyni hadisələri birdən çox obyektə müxtəlif vaxtlarda əlavə etsəniz, adlandırılmış bir funksiya yaratmaq bir yol ola bilər.

 var mouseOverHandler = function() { // Do stuff }; var mouseOutHandler = function () { // Do stuff }; $(function() { // On the document load, apply to existing elements $('select').hover(mouseOverHandler, mouseOutHandler); }); // This next part would be in the callback from your Ajax call $("<select></select>") .append(  ) .hover(mouseOverHandler, mouseOutHandler) .appendTo(  ) ; 
61
15 окт. cevap 15 oct lıq verilir . 2008-10-15 02:31 '08 at 02:31 2008-10-15 02:31

Bir hadisəni bir funksiyaya bağlamaq üçün sadəcə birləşdirə bilərsiniz və sonra iki dəfə zəng edə bilərsiniz: sənəddə bir dəfə hazır olursunuz və bir dəfə yeni DOM elementləri əlavə edən hadisədən sonra. Bunu yaparsanız, eyni hadisəni mövcud elementlərə iki dəfə bağlamağınızdan qorunmaq lazımdır, buna görə də mövcud hadisələri ləğv etməlisiniz və ya yalnız yeni yaradılan DOM elementlərinə (daha yaxşı) bağlanmanız lazımdır. Kod belə bir şeyə bənzəyir:

 function addCallbacks(eles){ eles.hover(function(){alert("gotcha!")}); } $(document).ready(function(){ addCallbacks($(".myEles")) }); // ... add elements ... addCallbacks($(".myNewElements")) 
42
15 окт. 15 oktyabrda Greg Borenstein tərəfindən verilmiş cavab 2008-10-15 02:35 '08 saat 02:35 'da 2008-10-15 02:35

.bind() əvəzinə .bind() istifadə etməyə cəhd edin. .hover .live() bağlayacaqdır. Ajax sorğusunu icra etdikdən sonra onay .hover göndərin.

37
22 марта '11 в 1:35 2011-03-22 01:35 cavab 22 mart 2011-ci il tarixində, 1:35, 2011-03-22 01:35 istifadəçi tərəfindən verilmişdir

Elementləri (hətta yaxınlarda yaradılanları) hadisələri və işləyicilərə, məsələn, onclick hadisə ilə əlaqələndirmək üçün canlı () metodundan istifadə edə bilərsiniz.

Burada yazdığım kodun bir nümunəsidir. Burada live () metodunun seçilmiş elementləri, hətta yeni yaradılmışları, hadisələrlə necə əlaqələndirdiyini görə bilərsiniz:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script> <input type="button" id="theButton" value="Click" /> <script type="text/javascript"> $(document).ready(function() { $('.FOO').live("click", function (){alert("It Works!")}); var $dialog = $('<div></div>').html('<div id="container"><input type ="button" id="CUSTOM" value="click"/>This dialog will show every time!</div>').dialog({ autoOpen: false, tite: 'Basic Dialog' }); $('#theButton').click(function() { $dialog.dialog('open'); return('false'); }); $('#CUSTOM').click(function(){ //$('#container').append('<input type="button" value="clickmee" class="FOO" /></br>'); var button = document.createElement("input"); button.setAttribute('class','FOO'); button.setAttribute('type','button'); button.setAttribute('value','CLICKMEE'); $('#container').append(button); });  }); </script> </body> </html> 
21
21 дек. Cavab Fazi tərəfindən 21 dekabr. 2011-12-21 10:26 '11 at 10:26 2011-12-21 10:26

Hadisələri dinamik şəkildə yaradılan elementlərə bağlamaq

Tək maddə:

 $(document.body).on('click','.element', function(e) { }); 

Uşaq əşyaları:

  $(document.body).on('click','.element *', function(e) { }); 

Qeyd əlavə * . Tədbir bu maddənin bütün uşaqları üçün tetiklenecektir.

Hesab edirəm ki,

 $(document.body).on('click','.#element_id > element', function(e) { }); 

O artıq işləyir, amma əvvəllər işləmişdir. Mən Google CDN- dən jQuery istifadə edirəm, amma dəyişdirdiklərini bilmirəm.

18
22 янв. Cavab verildi MadeInDreams 22 yanvar 2016-01-22 04:06 '16 'da 4:06' də 2016-01-22 04:06

Digər bir həll, maddə yaradan zaman bir dinləyici əlavə etməkdir. Dinləyiciyi bədənə yerləşdirmək yerinə, dinləyicini element yaratdığınız anda yerləşdirin:

 var myElement = $('<button/>', { text: 'Go to Google!' }); myElement.bind( 'click', goToGoogle); myElement.append('body'); function goToGoogle(event){ window.location.replace("http://www.google.com"); } 
16
07 окт. Martin Da Rosa tərəfindən verilmiş cavab Oct 07 2015-10-07 20:43 '15 'də 20:43' de, 2015-10-07 20:43

Seçiciyi istifadə etməyə üstünlük verirəm və onu sənəddə tətbiq edirəm.

Bu sənədə əlavə olunur və səhifə yükləndikdən sonra göstəriləcək elementlərə tətbiq olunacaq.

Məsələn:

 $(document).on("click", $(selector), function() { // Your code here }); 
16
21 нояб. cavab Vatsal 21 noyabrda verilir . 2015-11-21 15:01 '15 'də 15:01' də, 2015-11-21 15:01

jQuery(html, attributes) istifadə edərək dinamik yaradılması zamanı bir maddəə bir hadisə əlavə edə bilərsiniz.

JQuery 1.8 kimi , hər hansı bir jQuery nümunəsi metodu ( jQuery.fn metodu) ikinci parametrə keçirilmiş obyektin mülkiyyəti kimi istifadə edilə bilər:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 
11
05 апр. Cavab qonaq271314 Apr 05 tərəfindən verilir 2017-04-05 10:11 '17 'də 10:11' də 2017-04-05 10:11 'də

Məsələn, "MAIN" sinifinə diqqət yetirin,

 <div class="container"> <ul class="select"> <li> First</li> <li>Second</li> </ul> </div> 

Yuxarıdakı ssenaridə, jQuery-i izləyəcək ANA obyekt "konteyner" dir.

Sonra, əsasən, konteynerin altında, ul , li kimi elementlərin adları olacaq və select :

 $(document).ready(function(e) { $('.container').on( 'click',".select", function(e) { alert("CLICKED"); }); }); 
11
26 марта '16 в 5:15 2016-03-26 05:15 Cavab Aslan Kaya tərəfindən 26 Mart '16' da saat 05:15 'də 2016-03-26 05:15' də veriləcək

istifadə edə bilərsiniz

 $('.buttons').on('click', 'button', function(){ // your magic goes here }); 

və ya

 $('.buttons').delegate('button', 'click', function() { // your magic goes here }); 

bu iki üsul bərabərdir, lakin fərqli bir parametr əmrinə sahibdir.

jQuery nümayəndə heyətinə baxın

10
11 авг. cavab Mensur Grišević 11 aug. 2016-08-11 19:16 '16 at 19:16 2016-08-11 19:16

Dinamik şəkildə yaradılmış elementlər tıklamalara cavab vermirlər:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>A</button> 

Çözüm olaraq, bütün klikləri dinləyin və mənbə elementini yoxlayın:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>A</button> 

Bu "fəaliyyət nümayəndə heyəti" adlanır. Yaxşı xəbər jQuery-də quraşdırılmış funksiyadır: -)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>A</button> 
7
16 сент. Cavab veriliş 16 sentyabr verilir. 2017-09-16 10:01 '17 saat 10:01 'da 2017-09-16 10:01

Hadisənin bağlanması zamanı mövcud olan hər hansı bir səhifə və əgər səhifə dinamik şəkildə elementləri sinif adı ilə yaradılarsa bir hadisə, artıq mövcud olan bir valideynlə əlaqələndirəcəkdir

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="buttons"> <input type="button" value="1"> <button>2</button> <input type="text"> <button>3</button> <input type="button" value="5"> </div> <button>6</button> 
7
18 дек. Cavab 18 dekabrda Ankit Kathiriya tərəfindən verilir . 2015-12-18 11:48 '15 at 11:48 2015-12-18 11:48

Bunu cəhd edin -

 $(document).on( 'click', '.click-activity', function () { ... }); 
6
30 июня '16 в 9:25 2016-06-30 09:25 Rohit Suthar tərəfindən 30 iyun '16' da 9:25 2016-06-30 09:25 tarixində verilən cavabı verdi

3
02 дек. Cavab verilir Autumnswind 02 Dekabr. 2017-12-02 21:30 '17 saat 21:30 'da 2017-12-02 21:30

Bu, hadisəni təyin etməklə həyata keçirilir. Tədbir banderol elementinin elementinə bağlanacaq, lakin seçmə sinifinin elementinə veriləcəkdir. İşdə necə.

 $('.wrapper-class').on("click", '.selector-class', function() { // Your code here }); 

Şərhlər:

Bənövşə sinfinin elementi bir şey ola bilər. sənəd, bədən və ya banderolunuz. Kabuk artıq olmalıdır .

3
14 июня '18 в 14:15 2018-06-14 14:15 Cavab 14 iyun 18: 18-də, saat 20: 15- də 2018-06-14 14 : 15-dək Keem J'ye veriləcək

Canlı elementə hadisə işleyicilerini əlavə etmək üçün jQuery http://api.jquery.com/on/ .on() metodundan istifadə edin.

Bundan əlavə, versiya 1.9 .live() metodunu rədd edir.

3
30 нояб. Cavab Kalpesh Patel 30 noyabrda verilir. 2016-11-30 12:07 '16 at 12:07 2016-11-30 12:07

Hadisəni artıq mövcud olan bir valideynlə əlaqələndirin:

 $(document).on("click", "selector", function() { // Your code here }); 
2
08 июня '18 в 5:29 2018-06-08 05:29 cavab iyun ayının 08-də saat 18: 00-da 5:29 2018-06-08 05:29 ilə verilir

Elementlər və məcburi hadisələr yaratmaq üçün daha çevik həll ( mənbə )

 // creating a dynamic element (container div) var $div = $("<div>", {id: 'myid1', class: 'myclass'}); //creating a dynamic button var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' }); // binding the event $btn.click(function () { //for mouseover--> $btn.on('mouseover', function () { console.log('clicked'); }); // append dynamic button to the dynamic container $div.append($btn); // add the dynamically created element(s) to a static element $("#box").append($div); 

Qeyd Bu, hər bir maddə üçün hadisə işleyicisinin bir nümunəsi yaradır (bir döngədə istifadə edildikdə işə təsir göstərə bilər)

1
18 апр. Cavab 18 Apreldə Prasad De Silva tərəfindən verilir. 2017-04-18 22:47 '17 saat 10:47 'da 2017-04-18 22:47

Hadisəni dinləyicilərə document səviyyəsində bir hadisə dinləyicisi skriptindən daha modul bir funksiya ilə yerləşdirilməsini üstün edirəm. Beləliklə, mən aşağıdakıları sevirəm. Qeyd: bir maddəni eyni hadisə dinləyicisi ilə yönləndirə bilməzsiniz, buna görə də birdən çox dəfə bir dinləyici əlavə etməkdən çəkinməyin - yalnız bir barmaq.

1
08 июня '18 в 5:53 2018-06-08 05:53 Cavab Ron Royston tərəfindən 08 iyun '08 ' da 5:53 2018-06-08 05:53' də verilir

Mən $.bind$.unbind əldə etmək üçün bir həll axtarırdım. Dinamik olaraq əlavə elementlərdə heç bir problem olmadan işləmək üçün $.unbind .

Çünki () hadisələrə qoşulmaq üçün gəldiyimlərdən yanlış bir ayrılma yaratmaq üçün hiylə qurur:

 const sendAction = function(e){ ... } // bind the click $('body').on('click', 'button.send', sendAction ); // unbind the click $('body').on('click', 'button.send', function(){} ); 
-1
18 мая '18 в 3:13 2018-05-18 03:13 Cavab Evhs tərəfindən 18 May '18, 3:13 2018-05-18 03:13 'də verilir
 <html> <head> <title>HTML Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <div id="hover-id"> Hello World </div> <script> jQuery(document).ready(function($){ $(document).on('mouseover', '#hover-id', function(){ $(this).css('color','yellowgreen'); }); $(document).on('mouseout', '#hover-id', function(){ $(this).css('color','black'); }); }); </script> </body> </html> 
-1
27 сент. cavabı Fəxrul Hasan tərəfindən verilir . 2017-09-27 18:42 '17 saat 06:42 'da 2017-09-27 18:42

tags haqqında digər suallar və ya bir sual