javascript - jQuery icheck 插件在追加后不起作用

Question

我有“添加”按钮，当我单击它时会附加以下内容:

<div class="checkbox">
    <label>
       <input type="checkbox"> Sample
    </label>
 </div>  

到另一个div(类名.new-option-content)。 <强> FIDDLE

我正在使用 jquery icheck 插件来设计复选框的样式。但是当我追加时，我在复选框上看不到 icheck 样式。为什么会发生这种情况？我正确调用了该函数，但为什么它在追加后没有显示它的样式？

任何帮助将不胜感激。谢谢

jQuery

// Radio and Checkboxes

 $('input').iCheck({
    checkboxClass: 'checkbox-default',
    radioClass: 'radio-default'
  }); 


$('body').on('click', '.add-new-option', function() { 
        $('.new-option-content').append('<div class="checkbox"> <label> <input type="checkbox"> Sample </label> </div>');

});

Answer 1

动态追加新项目后，您必须再次执行 isCheck 函数。该指令应该是点击处理程序方法的一部分:

$('body').on('click', '.add-new-option', function() { 
  $('.new-option-content').append('<div class="checkbox"> <label> <input type="checkbox"> Sample </label> </div>');
  $('input').iCheck({
    checkboxClass: 'checkbox-default',
    radioClass: 'radio-default'
  });
});

这就是你 JSFiddle updated .