各要素をクローンするときにクリックするとき

Question

どのように要素がクローンされるときに、複数の要素のクラスを削除して追加しますか？各オン

$('.cc-form-control-switcher').each(function(){ 
$(".cc-form-control-switcher .btn-first, .cc-form-control-switcher .btn-second").on("click", function(e) { 
       e.preventDefault(); 
       var $self = $(this); 
       var $siblingSelected = $self.parent().find(".btn-switch"); 
       $siblingSelected.removeClass("btn-switch"); 
       $self.addClass("btn-switch"); 
       var hdnField = $self.parent().find("input[type=hidden]"); 

       if (hdnField.length > 0) { 
        hdnField.val($self.data("value")); 
       } 
      }); 
}); 

ここでデモhttps://jsfiddle.net/etgf979x/7/

「BTN-スイッチャー」をクリックし、起動しているが動作しますが、私は要素をクローン化してきたとき、それは...私はクリックでそれぞれを使用してみましたが、思われませんされています他に何を使うべきかアドバイスが必要なのです。

Answer 1

Event binding on dynamically created elements?

$(document).on("click", ".cc-form-control-switcher .btn-first, .cc-form-control-switcher .btn-second" ,function(e) { 
       e.preventDefault(); 
       var $self = $(this); 
       var $siblingSelected = $self.parent().find(".btn-switch"); 
       $siblingSelected.removeClass("btn-switch"); 
       $self.addClass("btn-switch"); 
       var hdnField = $self.parent().find("input[type=hidden]"); 

       if (hdnField.length > 0) { 
        hdnField.val($self.data("value")); 
       } 
      });