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

jQuery icheck plugin not working after being append

本文关键字：工作 追加 icheck 插件 jQuery      更新时间：2023-09-26

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

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

到另一个div（类名.new选项内容）。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>');
});

动态追加新项后，必须再次执行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。

只需对当前复选框再次运行check函数。问题是您动态地附加复选框。

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小提琴：http://jsfiddle.net/8w83nue3/

$('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%' 
    });
});

试试这个，效果很好。

当你附加一些插件时，总是试图在JS代码中重新初始化这些插件，否则它将永远无法工作。

相关文章：