腳本不工作負載元素

Question

我創建了一個表格複選框+包裝，即：

<form> 
    <div class="input-wrapper"> 
     <input type="checkbox" name="item[]" value="1"> 
    </dv> 
    <div class="input-wrapper"> 
     <input type="checkbox" name="item[]" value="2"> 
    </div> 
    <div class="input-wrapper"> 
     <input type="checkbox" name="item[]" value="3"> 
    </div> 
</form> 

，這觸發檢查工作：

$(".input-wrapper").on("click", function() { 
     var $checkbox = $(this).find(':checkbox'); 
     $checkbox.prop('checked', !$checkbox[0].checked); 
}); 

但是，當我打開從阿賈克斯其他複選框，即：

$.post(
    '/my/url', 
    {...my data...}, 
     function(data){ 
      if(data != 'failed'){ 
       //return new checkbox + wrapper too and append it at the end of the form 
       $('form').append(data); 
      } 
     } 
); 

切換檢查不適用於加載/附加元素。

如何解決這個問題？ 如何正確創建影響所有元素的腳本，即使對於加載的元素也是如此？

謝謝。

Answer 1

試試這個輕微的修改：

$("form").on("click", ".input-wrapper", function() { 
    var $checkbox = $(this).find(':checkbox'); 
    $checkbox.prop('checked', !$checkbox[0].checked); 
}); 

，讓我知道如何去。

Answer 2

綁定click監聽器的方式將綁定到當前DOM中的所有.input-wrapper元素。

您既可以單獨成冊點擊所帶來的新的，或委託聽者父對象，將留在DOM（如）