Dinamik olarak eklenen tablo satırları içinde önyükleme anahtarını kullanarak

Question

Dinamik olarak eklenmiş bir tablo satırı <tr> içinde Bootstrap Switch kullanıyorum.

<tr id="reference"><td>name</td><td></td><td><input type="checkbox" name="checkbox1" class="slider" data-size="mini" checked></td><td><a href="#"><i class="fa fa-object-ungroup"></i></a></td><td></td><td><a href="#"><i class="fa fa-trash"></i></a></td></tr> 

ve ekleme sonra

, o zaman açma/kapama kaydırıcıdaki bir Togglable içine basit onay kutusunu dönüştüren $("#reference input.slider").bootstrapSwitch(); çağırır: gibi eklemek tablo satırı html görünüyor. Her şey yolunda.

Kullanmakta olduğum sorun, önyükleme anahtarındaki olayları yakalamaktır. Satır dinamik eklendi gibi

, ben

$("#user-area-table tbody").on('click', 'switchChange.bootstrapSwitch', function(evt) { 
    console.log('bootstrap switch change'); 
)}; 

denedi ama bir açma/kapama durum değişikliği meydana geldiğinde, bu ulaştı asla. Bu kullanma

:

$("#user-area-table tbody").on('switchChange.bootstrapSwitch', function(evt) { 
    console.log('bootstrap switch change'); 
}); 

Ben olayları açık/kapalı alabilirsiniz ama $(this) basitçe tbody ve ben açık/kapalı değiştirilebilir hangi satır içinde belirlemek gerekir.

Answer 1

Bootstrap anahtarıyla ilişkili DOM giriş öğesini almak için evt.target kullanabilirsiniz. callback'inde geçirilen olay veriler burada hakkında daha fazla bilgi bulabilirsiniz bir jQuery olay nesnesi, geçerli: https://api.jquery.com/category/events/event-object/

o eleman edindikten sonra bunu şöyle içerdiği oluyor satır bulabilirsiniz:

$(evt.target).closest("tr"); 

sonra en yakın çekleri geçerli elemanı ve bu durumda, en yakın TR etiketinde (seçici ile eşleşir en yakın eleman bulmak için atalarından yoluyla DOM YUKARI bakar Ayrıca

, bu nedenle başarısız.

$("#user-area-table tbody").on('click', 'switchChange.bootstrapSwitch', function(evt) { 
    console.log('bootstrap switch change'); 
)}; 

İkinci bağımsız değişken aslında seçiciyi aradığı için oldu, ancak bir olay geçirdiniz. switchChange etiket adına ve bootstrapSwitch sınıfına sahip hiçbir öğe yoktur. Sadece .on ilk argümanı bir olay adını kabul eder, bu yüzden ikinci versiyonunuz aslında aranır.