应用iCheck (jQuery插件)来动态创建复选框

Apply iCheck (jQuery plugin) to dynamically created CheckBoxes

本文关键字：动态 创建 复选框 插件 iCheck jQuery 应用      更新时间：2023-09-26

我使用了非常棒的iCheck插件来为我的表单中的复选框设置样式。

使用插件，我可以调用$('input').iCheck()来应用所需的外观和功能。

然而，我被困在调用.iCheck()函数上动态创建的复选框。

在ajax调用中，我在success函数中构建了以下复选框;这是在$.each块中，但为了简单起见，我只在语句中包含代码。

var chk = $('<div><input id="' + n.ID + '" type="checkbox" name="lblChk"><label for="' + n.ID + '">' + n.Title + '</label></div>');
el.append(chk);

其中el是已存在于DOM树中的id为container的div, n是我作为JSON返回的对象

在构建复选框之后，我调用$('#container input').iCheck();，显然我没有得到什么特别的，但标准的复选框。我认为这是因为复选框是动态创建的，之后.iCheck()被调用。但是，即使在我创建复选框并调用.iCheck()之后，结果也是一样的。

有谁能指点我一下吗?

试试这个

$('#container').iCheck({checkboxClass: 'icheckbox_flat-green',radioClass: 'iradio_flat-green'});

还有另一种情况…当iccheck有回调

这段代码不能用于ajax加载的输入，因为它是bind()的替换:

$('#mycheckbox').on('ifChecked', function(event) {
    alert();
});
应该使用委托事件: 
$(document).on('ifChecked', '#mycheckbox', function(event) {
 alert('done'); 
});

试试这个…

$('#container').find('input').iCheck();

你试过检查$('#container input')的长度吗?我不确定，但输入不是container的直接子，所以可能找不到选择器$('#container input')。

我以前也遇到过类似的问题，我是这样解决的:

假设el变量是一个jQuery元素，我将把插件iCheck的初始化绑定到el的完全加载，所以:

这段代码应该放在AJAX追加数据

之后
el.ready(function() {
  $('#container input').iCheck({
    checkboxClass: 'icheckbox_flat-green',
    radioClass: 'iradio_flat-green' // If you are not using radio don't need this one.
  });
});

请记住使代码适应HTML结构的特殊性。在元素被附加到初始化这些新添加元素的页面之后运行上面的代码，但是如果你正在使用iCheck回调函数，那么只有当你正确声明这些回调函数，并像Florin警告的那样将事件委托给适当的标签时，插件才会工作。

这段代码应该放在iCheck first初始化

$(document).on('ifChecked', '#mycheckbox', function() {
  $(this).addClass('selected');
});
$(document).on('ifUnchecked', '#mycheckbox', function() {
  $(this).removeClass('selected');
});

试试这个:

$('input').iCheck({
     checkboxClass: 'icheckbox_flat-blue',
     radioClass: 'iradio_flat-blue'
});

如果你想设置从特定的div试试这个:

$('#MyDivId input').iCheck({
      checkboxClass: 'icheckbox_flat-blue',
      radioClass: 'iradio_flat-blue'
});

查看http://icheck.fronteed.com/上的文档

我刚刚遇到了同样的问题，解决方法很简单:调用iCheck方法。

var id = some_id;
var one_row = "<tr><td>...<td><td><input type='"radio'" class='"minimal'" id='"" + id + "'" name='"" + id + "'">radio1</td></tr>";
// add this row to HTML
// call the initialize method
$('#'+id).iCheck({radioClass: 'iradio_minimal-blue'});
相关文章：