Question

我有ADD按钮，当我点击它时会附加以下内容：

<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。

Answer 2

再次为当前复选框再次运行检查功能。问题是您动态附加复选框。

Js：

  // 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>');
        var $lastCheckBox = $('.new-option-content').find('input').last();  
        console.log($lastCheckBox);
          $lastCheckBox.iCheck({
        checkboxClass: 'checkbox-default',
        radioClass: 'radio-default'
      }); 

    });

Js fiddle：http://jsfiddle.net/8w83nue3/

Answer 3

$('body').on('click', '.add-new-option', function() { 
    $('.new-option-content').append('<div class="checkbox"><label><input type="checkbox"> Sample </label></div>');
    $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-red',
            increaseArea: '20%' 
    });
});

尝试这个工作正常。

Answer 4

当你追加一些插件时总是尝试重新激活你的JS代码中的插件，否则它永远不会工作。

jQuery icheck插件在追加后无法正常工作

4 个答案: