将 iCheck（jQuery 插件）应用于动态创建的 CheckBoxes答案

【问题标题】：Apply iCheck (jQuery plugin) to dynamically created CheckBoxes将 iCheck（jQuery 插件）应用于动态创建的 CheckBoxes
【发布时间】：2013-04-18 08:02:17
【问题描述】：

我使用出色的 iCheck 插件在我的表单中设置复选框的样式。

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

但是，我坚持在动态创建的复选框上调用 .iCheck() 函数。

在 ajax 调用中，我在成功函数中按如下方式构建我的复选框；这是在 $.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() 之后，结果也是一样的。

有人可以指导我吗？

【问题讨论】：

查看底部答案并在此处发表评论：stackoverflow.com/questions/6068955/…。希望这会有所帮助。
@Yatrix 感谢您的回复，但您提到的是哪个答案？是带有 setTimeout() 选项的那个吗？？
我在页面底部
是的，但这是一个非常肮脏的解决方案。您不知道 ajax 调用何时完成，因此调用 setTimeout 碰巧在成功或完成事件之前被调用是我不打算承担的风险:)
您找到解决方案了吗？如果没有，能否提供完整的代码？

标签： javascript jquery jquery-plugins icheck

【解决方案1】：

试试这个……

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

您是否尝试过检查$('#container input') 的长度？我不确定，但输入不是container 的直接子代，因此可能无法通过选择器$('#container input') 找到。

【讨论】：

$('#container input') 在#container 中选择每个<input/>，无论它是否是直接子代。直接子代的选择与 css 中的 $('#container > input') 相同。
如果我有一个 ifToggled Callbacks 附加到每个输入...我如何也启动它？？？
@Florin 你能详细说明一下吗？或者如果您有不同的情况，最好提出单独的问题。看不到任何与 ifToggled 相关的问题。 ...如果是某种事件...请参阅 Jquery 中的 live() 或 on() 方法。

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

还有另一种情况……当iCheck有回调时

此代码不适用于加载 ajax 的输入，因为它是 bind() 的替代品：

$('#mycheckbox').on('ifChecked', function(event) {
    alert();
});

应改为使用委托事件：

$(document).on('ifChecked', '#mycheckbox', function(event) {
 alert('done'); 
});

【讨论】：

【解决方案4】：

好吧，我前段时间遇到过类似的问题，然后这样解决了：

假设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，但是如果您使用 iCheck 回调，则插件只有在您正确声明这些回调时才能工作，将事件委托给适当的标签，就像Florin 警告的那样。

这段代码应该放在iCheck第一次初始化

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

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

【讨论】：

【解决方案5】：

我刚遇到同样的问题，解决方法很简单：调用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'});

【讨论】：

【解决方案6】：

试试这个：

$('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/上的文档

【讨论】：

避免“试试这个”或“试试那个”。但是，用小提琴展示一些例子是个好主意