$ (document) .on öğelerini birden çok olayı aynı öğeye bağlamak için

jQuery'de işleri yapmanın yeni uygun yoluna alışmaya çalışıyorum ancak "canlı" ciltleme işlemini nasıl yapacağımı anlayamıyorum orijinal olarak zarif/DRY.

$("#element_id").live("click",function(){ 
    //stuff 
}).live("mouseover", function(){ 
    //stuff 
}).live("mouseout", function(){ 
    //stuff 
});

Şimdi, bunu yapmak gerekir görünüyor $(document).on ile:

$(document).on("click","#element_id",function(){ 
    //stuff 
}).on("mouseover","#element_id",function(){ 
    //stuff 
}).on("mouseout","#element_id",function(){ 
    //stuff 
});

Bu daha az özlü Daha önce, ile sadece bir kere elemanı söz, bunu yapabileceğini düşünüyoruz "canlı" ve elemanı tekrarlar. Bunu başarmak için açık bir şekilde daha basit bir yolu var mı?

kaynak

2013-02-06 joshuahedlund

sen niye a * benzersiz tanımlayıcı * (yani kendi kimliği) ile bir eleman için bir devredilmiş olayı gerekir: –

@MattiasBuelens bu basitleştirilmiş bir örnekti. Özellikle, AJAX aracılığıyla dinamik olarak yüklenen tablo satırları için olayları ayarlamaya çalışıyorum, bu yüzden 3 katı tekrarlamamaya çalıştığım gerçek seçicim "#element_id tr" – joshuahedlund

Mümkün olan birden çok [JQuery .on() yönteminin çoğaltmasıdır olay işleyicilerinden bir seçiciye] (http://stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector) – j08691

$(document).on({ 
    click: function() {}, 
    mouseover: function() {}, 
    mouseout: function() {} 
}, '#element_id');

document; Daha spesifik bir seçici kullanmak isteyebilirsiniz. Ayrıca, dinamik olarak yüklenen bir kimlik öğesinin olması kötü bir uygulama olduğunu söylemek istemem ama şüpheli görünüyor.

var handler = function (event) { 

    var $target = $(event.target); 

    if ($target.is('#element_id')) } 

     switch (event.type) { 
      case 'click': 
       // stuff 
      break; 
      case 'mouseenter': 
       // stuff 
      break; 
      case 'mouseleve': 
       // stuff 
      break; 
     } 

    } 

}; 

$(document).on({ 
    click: handler, 
    mouseenter: handler, 
    mouseleave: handler, 
});

kaynak

2013-02-06 22:13:13

Teşekkürler, benim anlayışım, belirli bir seçici kullanıyorsanız, dinamik olarak yüklenmiş elemanlar için geçerli olmayacaktı, ama (belge) yapacak? – joshuahedlund

@joshuahedlund: 2. parametre olayı "devretmek" anlamına gelir. –

@joshuahedlund Dinamik olarak yüklenen elemanlar bir 'statik' kapsayıcıya eklendikçe (örn. Her zaman DOM'de bulunan bir 'konteyner '), bu kapsayıcıyı bağlanma kaynağı olarak kullanabilirsiniz (üst düzey belgenin yerine) '). Seçici argümanı, o konteynerin içindeki torun elemanları tarafından tetiklenen olayları filtreler. –

Ben senin geri aramaları kod paylaşmanız gerekiyorsa, kullanışlı bu yaklaşımı bulmak?

kaynak

2013-02-06 22:19:56 whitneyit

$ (document) .on öğelerini birden çok olayı aynı öğeye bağlamak için

cevap

İlgili konular