Dinamik html yüklendikten sonra bir tıklama etkinliği eklemek için jQuery .live () vs .on () yöntemi

.Live () yöntemi görünüşte kullanımdan kaldırılmıştır jQuery v.1.7.1 kullanıyorum.

Ben yaşıyorum sorun dinamik olarak kullanarak bir öğeye html yüklerken:

$('#parent').load("http://..."); 

Ben denemek ve daha sonra bir click olayı eklemek, bu yöntemlerden birini kullanarak olay kaydetmez:

$('#parent').click(function() ...); 

veya

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

Bu işlevselliği elde etmenin doğru yolu nedir? Benim için sadece .live () ile çalışıyor gibi görünüyor, ama bu yöntemi kullanmamalıyım. #Child'in dinamik olarak yüklenen bir öğe olduğunu unutmayın.

Teşekkürler.

Tıklama işleyicisinin dinamik olarak yüklenen bir öğe için çalışmasını istiyorsanız, olay işleyicisini bir üst nesneye (dinamik olarak yüklenmeyen) ayarlarsınız ve bu öğeye dinamik nesnenizle eşleşen bir seçici verirsiniz:

$('#parent').on("click", "#child", function() {});

Olay işleyicisi #parentnesneye eklenir ve bir tıklama olayı, kaynak oluşturulduğunda tıklandığında her zaman #childtıklama işleyicinizi tetikler. Buna yetkilendirilmiş olay işleme adı verilir (olay işleme, bir üst nesneye devredilir).

Bu şekilde yapılır, çünkü nesne henüz mevcut olmasa #parentbile nesneye ekleyebilirsiniz #child, ancak daha sonra var olduğunda ve tıklandığında, click olayı #parentnesneye yayılır, nesnenin kaynaklandığını #childve bir tıklama #childve etkinliğinizi tetiklemek için bir olay işleyici vardır .

Bunu dene:

$('#parent').on('click', '#child', function() {
    // Code
});

Gönderen $.on()belgeler:

Olay işleyicileri yalnızca seçili öğelere bağlıdır; kodunuzun çağrıldığı sırada sayfada bulunmaları gerekir .on().

Sizin #childAradığınızda eleman yok $.on()olay (aksine bağlı değildir, bu yüzden, üzerinde $.live()). #parentancak, bu nedenle, olayı buna bağlamak iyidir.

Sadece tetikleyici bir 'filtre' eylemlerine yukarıda benim kodunda ikinci argüman olay için köpürdü eğer #parentgelen #child.

$(document).on('click', '.selector', function() { /* do stuff */ });

EDIT: Bunun nasıl çalıştığı hakkında biraz daha bilgi veriyorum, çünkü ... kelimeler. Bu örnekle, belgenin tamamına bir dinleyici yerleştiriyorsunuz.

Ne zaman clickherhangi bir eleman (lar) eşleştirmeye .selector, olay ana belgeye kadar kabarcıklar - çok uzun başka dinleyici olarak orada o çağrı event.stopPropagation()yöntemi - ebeveyn elemanlarına bir olayın baloncuklanmasını top olacaktır.

Belirli bir öğeye veya bir dizi öğeye bağlanmak yerine, belirtilen seçiciyle eşleşen öğelerden gelen olayları dinliyorsunuz. Bu, mevcut olarak mevcut öğelerle ve dinamik olarak eklenen tüm öğelerle otomatik olarak eşleşecek bir kez bir dinleyici oluşturabileceğiniz anlamına gelir.

Performans ve bellek kullanımı da dahil olmak üzere birkaç nedenden dolayı akıllıdır (büyük ölçekli uygulamalarda)

DÜZENLE:

Açıkçası, dinleyebileceğiniz en yakın üst öğe daha iyidir ve documentolayları izlemek istediğiniz çocuklar o ana öğenin içinde olduğu sürece herhangi bir öğeyi kullanabilirsiniz ... soru ile.

1.7'deki .live () eşdeğeri şuna benzer:

$(document).on('click', '#child', function() ...); 

Temel olarak, tıklama etkinlikleri için belgeyi izleyin ve # çocuk için filtreleyin.

Yanıt için biraz geç olduğunu biliyorum, ama .live () yöntemi için bir çoklu dolgu oluşturdum. Ben jQuery 1.11 test ettik ve oldukça iyi çalışıyor gibi görünüyor. Mümkün olan yerlerde .on () yöntemini uygulamamız gerektiğini biliyorum, ancak tüm .live () çağrılarını eşdeğer .on () çağrılarına herhangi bir nedenle dönüştürmenin mümkün olmadığı büyük projelerde, aşağıdakiler olabilir iş:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

Sadece jQuery yükledikten sonra ve live () çağırmadan önce ekleyin.

.on (), jQuery 1.7 ve üstü sürümler içindir. Eski bir sürümünüz varsa, bunu kullanın:

$("#SomeId").live("click",function(){
    //do stuff;
});

Projemde 'canlı' kullandım ama arkadaşımdan biri canlı yerine 'açık' kullanmamı önerdi. Ve kullanmaya çalıştığımda senin gibi bir sorun yaşadım.

Sayfalarımda dinamik olarak düğmeler tablo satırları ve birçok dom şeyler oluşturuyorum. ama büyü kullandığımda kayboldu.

Bir çocuk gibi kullanmak gibi diğer çözümler, her tıklamada işlevlerinizi çağırır. Ama tekrar yapmanın bir yolunu buluyorum ve işte çözüm.

Kodunuzu şu şekilde yazın:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Arayanı çağırın (); nesnenizi sayfada böyle oluşturduktan sonra.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

Bu şekilde, sayfadaki her bir tıklama olmaması gerektiğinde işleviniz çağrılır.