.On ('tıklama') ile .click () arasındaki fark
Yanıtlar:
Bence fark kullanım kalıplarında.
Ben tercih ediyorum .onüzerinde .clickeski nedeniyle olabilir dinamik olarak eklenen elemanlar için daha az bellek ve çalışmayı kullanma.
Aşağıdaki html'yi düşünün:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>
üzerinden yeni düğmeler ekliyoruz
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});
ve "Uyarı!" bir uyarı göstermek için. Bunun için "tık" veya "açık" kullanabilirsiniz.
Kullandığımızda click
$("button.alert").click(function() {
alert(1);
});
yukarıdakilerle, seçiciyle eşleşen her bir öğe için ayrı bir işleyici oluşturulur . Bunun anlamı
- eşleşen birçok öğe birçok özdeş işleyici oluşturur ve böylece bellek kapladığı alanı artırır
- dinamik olarak eklenen öğelerde işleyici olmaz - yani yukarıdaki html'de yeni eklenen "Uyarı!" işleyiciyi yeniden bağlamadığınız sürece düğmeler çalışmaz.
Kullandığımızda .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});
Yukarıdakilerle birlikte, dinamik olarak oluşturulanlar da dahil olmak üzere seçicinizle eşleşen tüm öğeler için tek bir işleyici .
... başka bir neden .on
Adrien'in aşağıda yorumladığı gibi, kullanmanın bir başka nedeni de adlandırılmış .onolaylar.
Sizinle bir işleyici eklerseniz, .on("click", handler)normal olarak .off("click", handler)bu işleyiciyi kaldıracak şekilde kaldırın. Açıkçası bu sadece işleve bir referansınız varsa işe yarar, o zaman eğer yapmazsanız? Ad alanlarını kullanırsınız:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });üzerinden bağlama ile
$("#element").off("click.someNamespace");on('click' ...), bkz. stackoverflow.com/a/3973060/759452 ie. on('click.darkenallothersections' ...)ve aynı zamanda var on('click.displaynextstep' ...), sadece kullanarak seçtiğim bağını çözebilirim.unbind('click.displaynextstep')
on()jQuery'deki eğilim. JQuery 3'e yükselttiğimde güncelleme $(window).load(function() {});yapmak zorunda kaldım $(window).on("load", function (e) {}).
Aşağıdaki kod arasında herhangi bir fark var mı?
Hayır, sorunuzdaki iki kod örneği arasında işlevsel bir fark yoktur. .click(fn)için bir "kısayol yöntemidir" .on("click", fn). İçin belgelerden.on() :
.click()Olay işleyicileri eklemek veya tetiklemek için kullanılabilecek bazı olaylar için kısayol yöntemleri vardır . Steno yöntemlerinin tam listesi için etkinlikler kategorisine bakın .
Not bu .on()farklıdır .click()bu oluşturma yeteneğine sahiptir olmasıyla temsilci olay işleyicileri bir geçirilerek selectorise, parametre .click()değildir. Ne zaman .on()bir olmadan denir selectorparametresi, bu tam olarak aynı şekilde davranır .click(). Eğer olay heyet istiyorsanız, kullanmak .on().
.on()jQuery 1.7'den itibaren tüm etkinlik bağlamanızı yapmanın önerilen yoludur. Hem tüm işlevselliği rulo .bind()ve .live()bir fonksiyonun içine bunu farklı parametreler geçerken değiştirir davranış olduğunu.
Örneğinizi yazdığınız gibi, ikisi arasında bir fark yoktur. Her ikisi de clickolayına bir işleyici bağlar #whatever. on()isterseniz, çocuklar tarafından tetiklenen olayları #whatevertek bir işleyici işlevine devredebilmeniz için ek esneklik sunar .
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });
.live()yapmıyor? Ayrıca, bunun sadece işlevselliği olduğunu .click()ve bu nedenle gelecekteki olaylar için geçerli olmadığını söyleyen diğer cevaplarla çelişiyor gibi görünüyor .
.on()ne yapabilirim .click()yapar ve ne .bind()ve .live()do - Ama konu diyoruz hangi parametreleri bağlıdır. (Diğer bazı yanıtlar da bu sözü.) O olsa Not "Bind #whatever içindeki tüm bağlantıları" olduğu değil neyi .live()yapar, ne var .delegate()yok. kabı belirtmenize izin vermek yerine .live()tüm içerilere bağlanır document. Not ayrıca .live()jQuery 1.7'den itibaren kullanımdan kaldırılmıştır.
Diğer cevaplarda belirtildiği gibi:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })
Bununla .on()birlikte, .click()olay temsilcisinin (superceding .delegate()ve .live()) işlenmesine izin veren diğer birkaç parametre kombinasyonunu desteklediğine dikkat edin .
(Ve açıkça "keyup", "focus" vb. İçin benzer kısayol yöntemleri vardır.)
Fazladan cevap göndermemin nedeni .click()hiçbir parametre olmadan çağırırsanız ne olacağını belirtmektir :
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");
Eğer kullanırsanız dikkat çeken .trigger()doğrudan ayrıca ek parametreler veya ilgisi olmayan bir jQuery olay nesnesi, geçebilir .click().
Ayrıca, jQuery kaynak koduna bakarsanız (jquery-1.7.1.js'de) dahili olarak .click()(veya .keyup(), vb.) İşlevinin gerçekten .on()veya arayacağını göreceğinizi belirtmek istedim .trigger(). Açıkçası bu, gerçekten aynı sonuca sahip olduklarından emin olabileceğiniz anlamına gelir, ancak aynı zamanda .click(), kullanımın biraz daha fazla yükü olduğu anlamına gelir - çoğu durumda endişelenecek veya hatta düşünecek bir şey değil, ancak teorik olarak olağanüstü durumlarda önemli olabilir.
DÜZENLEME: Son olarak, .on()bir satıra birden çok olayı aynı işleve bağlamanıza olanak tanıdığına dikkat edin , örneğin:
$("#whatever").on("click keypress focus", function(){});.click().)
Aynı görünüyorlar ... click () işlevinden belgeler :
Bu yöntem .bind ('click', handler) için bir kısayoldur
On () işlevinden belgeler :
JQuery 1.7'den itibaren .on () yöntemi, olay işleyicilerini eklemek için gereken tüm işlevleri sağlar. Eski jQuery olay yöntemlerinden dönüştürme konusunda yardım için bkz. .Bind (), .delegate () ve .live (). .On () ile ilişkili olayları kaldırmak için, bkz. .Off ().
.clickvs.on
.click olaylar yalnızca öğe oluşturulduğunda çalışır ve yalnızca DOM hazır olduğunda yüklenen öğelere eklenir.
.on etkinlikler dinamik olarak DOM öğelerine eklenir; bu, ajax isteğinde veya başka bir şeyde (DOM hazır olduktan sonra) oluşturulan DOM öğelerine bir etkinlik eklemek istediğinizde yardımcı olur.
Burada, tıklama etkinliğini uygulamanın farklı yollarının bir listesini alırsınız. Buna göre uygun olanı seçebilirsiniz veya tıklamanız işe yaramıyorsa, bunlardan bir alternatif deneyin.
$('.clickHere').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$('.clickHere').on('click', function(){
// same as first one
// do your stuff
})
$(document).on('click', '.clickHere', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the '.clickHere ' element. This is
// called event delegation
// do your stuff
});
$('body').on('click', '.clickHere', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$('.clickHere').off().on('click', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})İnternetten ve bazı arkadaşlardan öğrenilenler kadar .on (), öğeleri dinamik olarak eklediğinizde kullanılır. Ancak, click olayının node.js'ye AJAX göndermesi gereken basit bir giriş sayfasında kullandığımda ve yeni öğeler ekledikten sonra çoklu AJAX çağrılarını çağırmaya başladı. Ben () tıklayın değiştirmek için her şey doğru gitti. Aslında daha önce bu sorunla karşılaşmadım.
YENİ ELEMANLAR
Tıklamanın yeni öğelere eklenmesini istiyorsanız, kritik noktaları vurgulamak için yukarıdaki kapsamlı yanıtlara bir ek olarak:
- ilk seçici tarafından seçilen elemanlar, örneğin $ ("body") deklarasyon yapılırken mevcut olmalıdır, aksi takdirde eklenecek hiçbir şey yoktur.
- ikinci bağımsız değişken olarak hedef öğeleriniz için geçerli seçiciyi içeren .on () işlevindeki üç bağımsız değişkeni kullanmanız gerekir.
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- $ ('. UPDATE') 'den daha etkilidir. click (function () {});
- daha az bellek kullanabilir ve dinamik olarak eklenen öğeler için çalışabilir.
- düzenleme ve silme düğmesi ile bir süre dinamik getirilen veriler, satır verilerinin EDIT VEYA SİLME sırasında JQuery olayı oluşturmaz, o zaman
$(document).on('click','.UPDATE',function(){ });jquery kullanarak aynı getirilen veriler gibi etkili bir şekilde çalışır. güncelleme veya silme sırasında düğme çalışmıyor:
