Neden click () yerine () üzerinde jQuery kullanılıyor?

Şu anda jQuery ile bir Tıklama oluştuğunda bir şey yapmam gerektiğinde bunu böyle yapacağım ...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

Başka birinin bir projede sahip olduğu bir koda bakıyordum ve bunu böyle yapıyorlar ...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

Şimdi Kullanımdan Kaldırılmış olan live () işlevini kullanmaları ve jQuery belgelerinin on()bunun yerine kullanılmasını söylemesi dışında, ancak her iki şekilde de neden ilk örneğim yerine live / on () kullanmalı?

Dinamik olarak oluşturulmuş öğeleriniz olabileceğinden (örneğin bir AJAX çağrısından gelenler), daha önce aynı öğe seçiciye bağlı olan aynı tıklama işleyicisine sahip olmak isteyebilirsiniz, ardından on()seçici bağımsız değişkenle tıklama olayına "yetki verirsiniz"

Göstermek:

http://jsfiddle.net/AJRw3/

on()click()bir seçiciniz yoksa, ile eşanlamlı da olabilir :

$('.elementClass').click(function() { // code 
});

ile eş anlamlıdır

$('.elementClass').on('click', function() { // code
});

İşleyiciyi sınıflı tüm öğelere yalnızca bir kez eklemesi anlamında elementClass. elementClassÖrneğin $('<div class="elementClass" />'), gelen yeni bir öğeniz varsa , işleyici o yeni öğeye bağlı olmayacak, yapmanız gereken:

$('#container').on('click', '.elementClass', function() { // code
});

Varsayarsak #containerolan .elementClassbireyin atası

Her biri birkaç noktaya değinen çok sayıda cevap var - umarım bu, neyin ve nasıl kullanılacağına dair iyi bir açıklama ile size cevabınızı verebilir.

Kullanmak click()bir takma addır bind('click' ...). Kullanımı bind(), olay dinleyicisi kurulurken DOM'u olduğu gibi alır ve işlevi DOM'daki eşleşen öğelerin her birine bağlar. Diğer bir deyişle, kullanırsanız $('a').click(...), bu kod çalıştığında bulunan DOM'daki her bağlantı etiketinin tıklama olayına sağlanan işlevi bağlayacaksınız.

JQuery'de kullanmak live()eski yöntemdi; tıpkı bind()yaptığı gibi olayları bağlamak için kullanıldı , ancak kod çalıştığında bunları DOM içindeki öğelere bağlamakla kalmaz, aynı zamanda DOM'daki değişiklikleri dinler ve olayları gelecekte eşleşecek öğelere de bağlar. Bu, DOM manipülasyonu yapıyorsanız ve DOM'a daha sonra kaldırılabilen / güncellenebilen / eklenen ancak DOM ilk yüklendiğinde var olmayan bazı öğelerde bir olay olması gerekiyorsa kullanışlıdır.

Sebebi live()o kötü uygulanan çünkü artık amorti olmasıdır. Kullanmak içinlive() , size (sanırım) başlangıçta DOM en az bir eleman seçmek mümkün olması gerekiyordu. Ayrıca, işlevin bir kopyasının her öğeye bağlı olarak çalışmasına neden oldu - ve 1000 öğeniz varsa, bu çok sayıda kopyalanmış işlevdir.

on()Fonksiyonun yaratılması, bu sorunların üstesinden gelmekti. Tek bir olay dinleyicisini DOM'da değişmeyecek bir nesneye bağlamanıza olanak tanır (böylece on()daha sonra kaldırılacak / DOM'a eklenecek bir öğe üzerinde kullanamazsınız - onu bir ana nesneye bağlayın) ve basitçe uygulayın işlevin yalnızca seçici ile eşleşen bir öğeye köpürtüldüğünde çalıştırılması için bir "filtre" öğesi. Bu, tek bir öğeye bağlı (bir grup kopya değil) yalnızca bir işleviniz olduğu anlamına gelir - DOM'a "canlı" etkinlikler eklemek için çok daha iyi bir yaklaşım.

... ve bu farklılıklardır ve her işlevin neden var olduğu ve neden live()amortismana tabi tutulduğu.

• $("a").live()-> Bu <a>çağrıldıktan sonra oluşturulmuş olsa bile herkes için geçerli olacaktır .
• $("a").click()-> Yalnızca <a>bu çağrılmadan önce tümü için geçerli olacaktır . (Bu bir kısayol bind()ve on()1.7'de)
• $("a").on()-> Olay işleyicilerini eklemek için gereken tüm işlevleri sağlar. (JQuery 1.7'deki en yeniler)

Alıntılar :

JQuery 1.7'den itibaren, .live () yöntemi kullanımdan kaldırılmıştır. Olay işleyicileri eklemek için .on () kullanın. JQuery'nin eski sürümlerinin kullanıcıları .live () yerine .delegate () kullanmalıdır.
Bu yöntem, bir sayfanın belge öğesine yetki verilmiş olay işleyicileri eklemek için bir yol sağlar, bu da bir sayfaya içerik dinamik olarak eklendiğinde olay işleyicilerin kullanımını basitleştirir. Daha fazla bilgi için .on () yönteminde doğrudan ve yetki verilmiş olaylar tartışmasına bakın.

.On () yöntemi, jQuery nesnesindeki geçerli olarak seçili öğe kümesine olay işleyicileri ekler. JQuery 1.7'den itibaren .on () yöntemi, olay işleyicilerini eklemek için gereken tüm işlevleri sağlar.

Önceki sürümlerde, .bind () yöntemi, bir olay işleyicisini doğrudan öğelere eklemek için kullanılır.

click()temsilci olmayan yönteminin kısayoludur on(). Yani:

$(".close-box").click() === $(".close-box").on('click')

Olayları delege etmek için on(), ie. dinamik oluşturulmuş nesnelerde şunları yapabilirsiniz:

$(document).on('click', '.close-box') // Same as $('.close-box').live()

Ancak, on()herhangi bir statik öğede yetkilendirmeyi olduğu documentgibi sunar live():

$("#closestStaticElement").on('click', '.close-box')

Ve arasındaki farkılivebind okumalısın .

Özetle, liveolay yetkilendirmesini kullanarak şimdi ve gelecekte var olan öğelere bağlanmanıza izin verir.

Bunun aksine, aracılığıyla eklenen işleyiciler bind(ve kısayolları gibi click) işleyicileri doğrudan seçici ile eşleşen DOM öğelerine ekler ve bu nedenle yalnızca şu anda var olan öğelere bağlıdır.

liveEsnekliğin bir sonucu performansın azalmasıdır, bu nedenle onu yalnızca sağladığı işlevselliğe ihtiyaç duyduğunuzda kullanın.

$el.click(fn) kısayol $el.on('click', fn)

Daha fazla bilgi için http://api.jquery.com/click/ ve http://api.jquery.com/on/ adreslerine bakın .

Bazı olay işleyicilerini bağlamanız gerektiğinde dynamically added elements, onu kullanmanız live(kullanımdan kaldırılmıştır) veya onçalıştırmanız gerekir. Basitçe $('element').click(...);DOM herhangi dinamik olarak eklenen eleman üzerinde çalışmaz.

JQuery'nin .bind (), .live () ve .delegate () Arasındaki Fark hakkında daha fazla bilgi .

$ .click () yalnızca bağlama veya on için bir kısayoldur. JQuery belgelerinden:

İlk iki varyasyonda, bu yöntem .bind ("tıklama", işleyici) ve jQuery 1.7'den itibaren .on ("tıklama", işleyici) için bir kısayoldur. Üçüncü varyasyonda, .click () bağımsız değişkenler olmadan çağrıldığında, .trigger ("tıklama") için bir kısayoldur.

.on()Yöntem jQuery nesnesinde elemanların o anda seçili kümesine olay işleyicileri vermektedir. click()Yöntemi bir elemanın üzerine olayı "tıklama" JavaScript olayı bir olay işleyicisi bağlar veya tetikleyiciler.

Düzlükte .click(... , seçicinin hedefi anında değişirse (örneğin, bir ajax tepkisi yoluyla), o zaman davranışı yeniden atamanız gerekir.

.on(...(JQuery 1.7) çok yenidir ve yine davranışı eklemek için daha hızlı bir yoldur yetkilendirilen olayları kullanarak canlı senaryoyu kapsayabilir.

İn onyöntemi, olay giderici hedef yerine üst elemanına bağlanmıştır.

misal: $(document).on("click", ".className", function(){});

Yukarıdaki örnekte, tıklama olay işleyicisi belgeye eklenmiştir. Ve birinin hedef öğeye tıklayıp tıklamadığını bilmek için olay köpürmesini kullanır.