Klik hadisəsi dinamik olaraq yaradılan maddələrlə işləmir.

 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("h2").html("<p class='test'>click me</p>") }); $(".test").click(function(){ alert(); }); }); </script> </head> <body> <h2></h2> <button>generate new element</button> </body> </html> 

Düyməsini tıklayaraq <h2> dəki sinif adı test ilə yeni bir tag yaratmağa çalışdım. test ilə bağlı bir tıklama hadisəsini də təyin etdim. Amma hadisə işləmir.

Hər kəs kömək edə bilərmi?

339
12 июля '11 в 5:02 2011-07-12 05:02 Cheng 12 İyul tarixində təyin olundu '11 da 5:02 2011-07-12 05:02
@ 20 cavab

Istifadə etdiyiniz click() məcburiyyətinə işəgötürənni artıq mövcud elementlərə bağlayan "birbaşa" bağlama adlanır. Gələcəkdə yaradılan əşyalara bağlı olmayacaq. Bunu etmək üçün on() ilə bir "nümayəndəlik" məcburi yaratmaq lazımdır.

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ənbə

Buradasınız:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <h2></h2> <button>generate new element</button> 

Yuxarıda jQuery versiyası 1.7 + istifadə edənlər üçün işləyir. Köhnə bir versiyanı istifadə edirsinizsə, əvvəlki cavanlığa baxın.


Əvvəlcədən cavab :

live() istifadə edin:

 $("button").click(function(){ $("h2").html("<p class='test'>click me</p>") }); $(".test").live('click', function(){ alert('you clicked me!'); }); 

Mənim üçün çalışdı. JsFiddle ilə birlikdə çalışdı.

Və ya delegate() ilə əlaqə qurmaq üçün yeni bir yol varmı?

 $("h2").delegate("p", "click", function(){ alert('you clicked me again!'); }); 

Yenilənib jsFiddle .

511
12 июля '11 в 5:06 2011-07-12 05:06 Cavab 12 iyul 'da saat 05 : 55-Cümə günü saat 05 : 06-da veriləcək

.on() hadisələrlə .on() metodundan istifadə edin

 $('#staticParent').on('click', '.dynamicElement', function() { // Do something on an existent or future .dynamicElement }); 
border=0

.on() metodu, istədiyiniz hər hansı bir hadisə işleyicisini təyin etməyə imkan verir:
daha sonra DOM-a əlavə elementlər və ya gələcək elementlər əlavə olundu.

PS: .live() istifadə etməyin! JQuery 1.7 + 'dan, .live .live() metodundan istifadə edilmir.

170
26 янв. Roko C. Buljan tərəfindən 26 yanvarda cavablandırıldı 2013-01-26 05:31 '13 saat 05:31 'də 2013-01-26 05:31

Səbəb:

Click () - element html-kodunda olduqda yalnız bir hadisə işleyicisini verir.

Səhifə yükləndikdən sonra dinamik olaraq yaradılan (Gələcək element) yeni bir element nəzərə alınmayacaq.

Dinamik elementlər javascript və ya jquery (html deyil) istifadə olunur .

Beləliklə, klik hadisəsi tetiklenmez.

Həll:

Bunu aradan qaldırmaq üçün on () funksiyasından istifadə etməmiz lazımdır.

Domen nümayəndəsi (), canlı ()on () funksiyaları DOM elementləri üzərində üstünlüklərə malikdir.

həm də mövcud elementləri və gələcək elementləri işə sala bilər.

bütün səhifədə olan maddələrə baxa bilər.

Dele (), live () funksiyaları köhnəlmişdir (onları istifadə etməyin).

Dinamik şəkildə yaradılan (gələcək) elementlərdə hadisəni tetiklemek üçün funksiyanı istifadə etməlisiniz.

Kodu $ (sənəd) dan çıxarın .ready:

 $(".test").click(function(){ alert(); }); 

Değiştir:

 $(document).on('click','.test',function(){ alert('Clicked'); }); 
52
16 апр. Cavab Prabhagaran Apr 16 verilir 2015-04-16 15:39 '15 'də 15:39' də 2015-04-16 15:39

Bunun üçün istifadə etmək lazımdır . yaşamaq :

 $(".test").live("click", function(){ alert(); }); 

ya da jquery 1.7 + istifadə etdiyinizdə istifadə edin . :

 $(".test").on("click", "p", function(){ alert(); }); 
11
12 июля '11 в 5:06 2011-07-12 05:06 cavab amurra 12 iyul '11 'də saat 05:06' da verildi

Change

  $(".test").click(function(){ 

Kənar

  $(".test").live('click', function(){ 

DEMO CANLI

jQuery .live()

11
12 июля '11 в 5:07 2011-07-12 05:07 cavab qwertymk 12 iyul '11, saat 05:07 'də verilir 2011-07-12 05:07

.live() və ya .delegate()

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

http://api.jquery.com/delegate/

.test elementiniz .test .click() metodundan sonra əlavə olundu, ona görə bir hadisə olmadı. Live və Delegate bu hadisəni uşaqlarını yoxlayan valideyn elementlərinə bir tətik verər, bundan sonra əlavə edilən hər şey hələ də işləyir. Hesab edirəm ki, Live bütün sənədləri yoxlayacaq və nümayəndə heyətə köçürülə bilər, buna görə heyət daha səmərəlidir.

Əlavə məlumat:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

8
12 июля '11 в 5:10 2011-07-12 05:10 cavab DSKrepps 12 iyul '11, saat 05:10 'da 2011-07-12 05:10 verilir

Bu funksiyanı js faylına əlavə edin. Hər brauzerdə işləyəcək.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='mydiv'>Div</div> 
7
19 июля '13 в 11:26 2013-07-19 11:26 Cavab 19 İyul 2013 günü saat 11:26 'də Abhishek tərəfindən verilir. 2013-07-19 11:26

Dinamik şəkildə yaradılmış məzmuna bir hadisə tətbiq etmək ən yaxşı yol heyət vasitəsilə həyata keçirilir.

 $(document).on("eventname","selector",function(){ // code goes here }); 

buna görə kodunuz indi eyni olacaq.

 $(document).on("click",".test",function(){ // code goes here }); 
5
12 февр. Cavab 12 fevralda Jay Patel tərəfindən verilir. 2015-02-12 16:05 '15 at 4:05 pm 2015-02-12 16:05

JQuery sənədlərində iki həll tapdım:

Birincisi: nümayəndəliyi bədən və ya sənəd üzərində istifadə edin

Məsələn:

  $("body").delegate('.test', 'click', function(){ ... alert('test'); }); 

Niyə?

Cavabdır. . Bir işəgötürəni seçiciyə uyğun olan bütün elementlər üçün bir və ya daha çox hadisəyə, indi və ya gələcəkdə, kök elementlərin müəyyən bir setinə əsaslanaraq əlavə edin. Link: http://api.jquery.com/delegate/

İkincisi: funksiyanı "on" ilə "$ (sənəd)" qoy və zəng etmək istədiyiniz elementə əlavə edin. Birinci parametr "hadisə işləyicisi", ikincisi isə element, üçüncüsü bir funksiyadır. Məsələn:

  $( document ).on( 'click', '.test', function () { ... alert('test'); }); 

Niyə?

Cavab: Hadisə işleyicileri yalnız seçilmiş elementlərə bağlıdır; kodunuz bir .on () çağırış etdiyiniz anda səhifədə olmalıdır. Elementlərin mövcud olduğundan və seçiləcəyindən əmin olmaq üçün sənəd işlədicilərindəki hadisələri səhifədə HTML formatında olan elementlər üçün bağlayın. Sayfada yeni bir HTML kodu girilirse, yeni HTML sayfada yer aldıktan sonra elementləri seçin və hadisə işleyicilerini əlavə edin. Və ya aşağıda göstərildiyi kimi bir hadisə işleyicisini əlavə etmək üçün nümayəndəlikli hadisələrdən istifadə edin ... link: https://api.jquery.com/on/

5
17 марта '14 в 2:40 2014-03-17 02:40 cavab, user3425150 17 mart '14 'də 2:40 2014-03-17 02:40 tərəfindən verilir

Problem, DOM "test" sinfi ilə bir şey etməzdən əvvəl "test" sinifini bir hadisə ilə əlaqələndirməyə çalışmaqdır. Bütün bu kimi görünə bilər baxmayaraq, JQuery həqiqətən DOM vasitəsilə gəzmək və düyməsini bir hadisə ilə "Tıkla" yaratmaq əvvəl ready() funksiyası başladığında, tıklama hadisə vasitəsilə hərəkət edir.

"Düymə" klik işleyicisine "test" Tıklama olayını əlavə edərək, DOM doğru elementdən sonra ona qoşulur.

 <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h2").html("<p class='test'>click me</p>") $(".test").click(function(){ alert() }); }); }); </script> 

live() (digərləri qeyd etdiyimiz kimi) bunu etmək üçün başqa bir üsuldur, amma JS kodunuzda kiçik bir səhvi göstərmək gözəl olardı. Nə yazdığınız səhvdir, yalnız düzgün bir şəkildə əhatə olunmalıdır. DOM və JS işinin necə bir çox ənənəvi developers ətrafında sarıldığı ən çətin şeylərdən biri olduğunu başa düşmək.

live() bu işi aparmaq üçün daha təmiz bir üsuldur və əksər hallarda bunun doğru yoludur. Əslində, DOM'u müşahidə edir və içindəki elementlər dəyişdikdə hər şeyi yenidən bərpa edir.

4
12 июля '11 в 5:19 2011-07-12 05:19 Cavab Marc LaFleur tərəfindən 12 iyul, '11 'də saat 05:19' da 2011-07-12 05:19 'də verilir
 $(.surrounding_div_class).on( 'click', '.test', function () { alert( 'WORKS!' ); }); 

Yalnız .surrounding_div_class sinifi olan DIV, .test obyektinin dərhal valideynidirsə, işləyəcəkdir.

Divarda doldurulacaq başqa bir obyekt varsa, işləməyəcəkdir.

3
25 июля '13 в 17:42 2013-07-25 17:42 cavab Nikolaus Pluta tərəfindən 25 İyul 2013 tarixində 17:42 2013-07-25 17:42 tarixində verilir

Alternativ və daha qısa alternativ (IMHO), klik hadisəsinə cavab verən və istədiyiniz zaman jQuery üçün hədəf elementi geri göndərən xam javascript funksiyasından istifadə etməkdir. Bu yanaşmanın üstünlüyü, məhsulunuzu hər yerdə dinamik şəkildə əlavə edə bilərsiniz və klik işləyicisi "işləyəcək" və nəzarəti ana elementlərə və s. Nümayəndə verməyə ehtiyacınız yoxdur.

Addım 1: onclick hadisəsini tetiklemek üçün dinamik html'i yeniləyin. Hadisə obyektini arqument kimi qəbul etməyi unutmayın.

 $ ("düyməsinə"). basın (function () { $ ("h2") html ("<p class = 'test' onclick = 'test (hadisə)' > mənə basın </ p>") });

Addım 2: Klik hadisəsinə cavab vermək üçün test funksiyası yaradın.

 funksiya testi (e) { alert (); });

Bundan əlavə, 3-cü addım: jQuery istifadə etdiyinizi nəzərə alaraq mənə istinad mənbəyi düyməsinə qayıtmaq faydalı olacağını güman edirəm

<Pre >> funksional test (e) {xəbərdarlıq (); // Tuşa keçid əldə edin // Bu xəttin izahı burada var target = (e.target)? e.target: e.srcElement; JQuery sehrini yaratmaq üçün jQuery düyməsinə keçid keçin $ btn = $ (target); });
3
23 окт. Nick Mitchell tərəfindən verilmiş cavab 23 oktyabr 2014-10-23 01:50 '14 saat 01:50 2014-10-23 01:50

JQuery. Yaxşı işləyir, amma yuxarıda göstərilən həllərin bir qismini həyata keçirən göstəricilərlə əlaqədar bəzi problemlər oldum. Mənim istifadə etdiyim problem .hover ki, hadisələr fərqli şəkildə .hover metodundan fərqli olaraq göstərilir.

Bir problem də ola biləcək hər kəs üçün yalnız fyi. Dəyişkən əlavə element üçün hover hadisəsini yenidən qeydiyyatdan keçməklə problemimi həll etdim:

göstərici dinamik olaraq yaradılmış elementlər üçün işləməyincə, hangup hadisə yenidən qeydiyyatdan keçin. belə ki, hər dəfə yeni / dinamik element yaratdığımda, hover kodunu yenidən əlavə edim. yaxşı işləyir

 $('#someID div:last').hover( function() { //... }, function() { //... } ); 
3
08 апр. cavab user2257720 08 apr tərəfindən verilir . 2013-04-08 16:07 '13 'da 16:07' da 2013-04-08 16:07

Mən birbaşa işıq qutusuna (tinybox) canlı və ya nümayəndə heyətinə getməmişəm.

SetTimeout'u aşağıdakı sadə şəkildə uğurla istifadə etdim:

 $('#displayContact').click(function() { TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true}); setTimeout(setContactClick, 1000); }) function setContactClick() { $('#contactSubmit').click(function() { alert($('#contactText').val()); }) } 
3
07 янв. Cavab Sasha Shepherd tərəfindən verilir 07 Yanvar 2015-01-07 18:04 '15 at 18:04 2015-01-07 18:04

Element içərisində onclick="do_something(this)" istifadə edə bilərsiniz

3
17 нояб. Cavab 17 noyabr Daryn K tərəfindən verilir . 2016-11-17 04:04 '16 'da 4:04' də 2016-11-17 04:04

Əla işləyir.

Bu səhnəyə dinamik şəkildə əlavə elementlər üçündür.

 $('#selectAllAssetTypes').live('click', function(event){ alert("BUTTON CLICKED"); $('.assetTypeCheckBox').attr('checked', true); }); 

Qəzəblənir, Ankit.

3
08 янв. Cavab Ankit Tanna 08 jan tərəfindən verilir . 2013-01-08 12:32 '13 at 12:32 2013-01-08 12:32

Bir kliklə dinamik olaraq yaradılmış elementləri əlavə edə bilərsiniz. Aşağıdakı bir nümunə. İcra edildiyinə əmin olmaq üçün "Zaman" əmrini istifadə edin. Mənim nümunəmdə bir sinif uzantısı olan bir div aldım, "daha çox görmek üçün tıklayın" et ve sonra orijinal divu gizlət / göstərmək üçün bu aralığı istifadə edin.

 $.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){ $(".clickActivate").click(function(){ $(this).next().toggle(); }) }); 
2
14 апр. Cavab Daryl H 14 apr tərəfindən verilir . 2016-04-14 22:10 '16 saat 10:10 'da 2016-04-14 22:10

Mən dinamik olaraq onlara yeni elementlər əlavə edərək, masalarla işləyirəm və on () istifadə edərək, mənim üçün işləmək üçün yeganə yol, qeyri-dinamik bir valideyndən istifadə etməkdir:

 <table id="myTable"> <tr> <td></td> // Dynamically created <td></td> // Dynamically created <td></td> // Dynamically created </tr> </table> <input id="myButton" type="button" value="Push me!"> <script> $('#myButton').click(function() { $('#myTable tr').append('<td></td>'); }); $('#myTable').on('click', 'td', function() { // Your amazing code here! }); </script> 

Bu, həqiqətən faydalıdır, çünki () bağlı hadisələri silmək üçün off () funksiyasından istifadə edə bilərsiniz və bir dəfə hadisələri bir dəfə istifadə etmək üçün birdən istifadə edə bilərsiniz.

2
06 мая '13 в 9:11 2013-05-06 09:11 Cavab Timbergus tərəfindən mayın 06-da saat 09:11 ' də verildi 2013-05-06 09:11

Konteynerə və ya bədənə dinamik şəkildə əlavə edilmiş bir əlaqə varsa:

 var newLink= $("<a></a>", { "id": "approve-ctrl", "href": "#approve", "class": "status-ctrl", "data-attributes": "DATA" }).html("Its ok").appendTo(document.body); 

Siz işlənməmiş javascript elementinizi götürə və bir hadisə dinləyicisi əlavə edə bilərsiniz, məsələn, basın:

 newLink.get(0).addEventListener("click", doActionFunction); 

Yeni bir linkin bu nümunəsini neçə dəfə əlavə etdiyinizə baxmayaraq, jquery click funksiyasından istifadə etdiyiniz kimi istifadə edə bilərsiniz.

 function doActionFunction(e) { e.preventDefault(); e.stopPropagation(); alert($(this).html()); } 

Beləliklə, mesajla bir mesaj alacaqsınız

Onun oku

Digər alternativlərə nisbətən daha yaxşı bir performans var.

İsteğe bağlı . Jquery'dən qaçınmaq və düz javascript istifadə edərək daha yaxşı performans əldə edə bilərsiniz. 8-ci versiyadan əvvəl IE istifadə edirsinizsə, addEventListener metodundan istifadə etmək üçün bu polifilləri istifadə addEventListener

 if (typeof Element.prototype.addEventListener === 'undefined') { Element.prototype.addEventListener = function (e, callback) { e = 'on' + e; return this.attachEvent(e, callback); }; } 
2
10 нояб. Cavab EliuX 10-da verilir . 2016-11-10 21:45 '16 saat 21:45 'də 2016-11-10 21:45

Klik artıq mövcud olan elementlərə bağlı olduğundan 'on' istifadə edin.

Məsələn,

 $('test').on('click',function(){ alert('Test'); }) 

Bu kömək edəcək.

0
01 июня '17 в 13:08 2017-06-01 13:08 Cavab Abhijit 01 iyun 'da saat 13:08' də veriləcək 2017-06-01 13:08

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