javascript 将 iCheck（jQuery 插件）应用于动态创建的复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16197594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply iCheck (jQuery plugin) to dynamically created CheckBoxes
提问by Subliminal Hash
I use the fantastic iCheckplugin to style my checkboxes in my form.
我使用出色的iCheck插件在表单中设置复选框的样式。
With the plugin, I am able to just call $('input').iCheck()to apply the desired look and functionality.
使用该插件，我只需调用$('input').iCheck()即可应用所需的外观和功能。
However, I am stuck at calling the .iCheck()function on dynamically created checkboxes.
但是，我坚持在.iCheck()动态创建的复选框上调用该函数。
In an ajax call, I build my checkboxes as follows in the success function; This is in an $.eachblock but for simplicity purposes, I've only included code within the statement.
在 ajax 调用中，我在成功函数中按如下方式构建了我的复选框；这是在一个$.each块中，但为了简单起见，我只在语句中包含了代码。
var chk = $('<div><input id="' + n.ID + '" type="checkbox" name="lblChk"><label for="' + n.ID + '">' + n.Title + '</label></div>');
el.append(chk);
Where elis a div with the id of containerthat already exists in the DOM tree and nis my object returned as JSON
DOM 树中已存在elID 的 div在哪里container，并且n我的对象是否以 JSON 形式返回
After building the checkboxes and I call $('#container input').iCheck();obviously I get nothing special but standard checkboxes. I presume it is because the checkboxes are created dynamically and after the .iCheck()is called. But even after I create checkboxes and call .iCheck()the result is the same.
建立复选框后，我$('#container input').iCheck();显然打电话给我，除了标准的复选框外，我没有什么特别的。我认为这是因为复选框是在.iCheck()调用之后动态创建的。但即使在我创建复选框并调用后.iCheck()，结果也是一样的。
Can anyone guide me on this?
任何人都可以指导我吗？
回答by Felipe Mala
Try this
试试这个
$('#container').iCheck({checkboxClass: 'icheckbox_flat-green',radioClass: 'iradio_flat-green'});
回答by Florin
Also there is another situation ... when iCheck has Callbacks
还有另一种情况……当 iCheck 有回调时
This code won't work for the ajax-loaded inputs, since it's a replacement of bind():
此代码不适用于 ajax 加载的输入，因为它替代了 bind()：
$('#mycheckbox').on('ifChecked', function(event) {
alert();
});
Delegated events should be used instead:
应改用委托事件：
$(document).on('ifChecked', '#mycheckbox', function(event) {
alert('done');
});
回答by rahul maindargi
Try this...
试试这个...
$('#container').find('input').iCheck();
have you tried checking length of $('#container input')? I am not sure but input is not the direct child of containerso might not be found with selector $('#container input').
你试过检查长度$('#container input')吗？我不确定，但 input 不是其直接子元素，container因此可能无法在 selector 中找到$('#container input')。
回答by Diligasi
Well, I had a similar problem sometime ago and solved it like this:
好吧，我前段时间遇到了类似的问题，并像这样解决了它：
Assuming that the elvariable is a jQuery element I'll bind the plugin iCheck's initialization to the el's fully load, so:
假设el变量是一个 jQuery 元素，我会将插件 iCheck 的初始化绑定到el的完全加载，因此：
This code should be placed after AJAX appends data
这段代码应该放在 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.
});
});
Remember to adapt the code to the particularities of your HTML structure. Running the above code just after the elements are appended to the page you are initializing the iCheck of these newly added elements, however if you are using the iCheck callbacks, the plugin will only work if you declare these callbacks correctly, delegating the events to the appropriate tags just as Florinwarned.
请记住使代码适应您的 HTML 结构的特殊性。在元素添加到页面后运行上面的代码，您正在初始化这些新添加元素的 iCheck，但是如果您使用 iCheck 回调，则插件只有在您正确声明这些回调时才能工作，将事件委托给正如弗洛林警告的那样，适当的标签。
This code should be placed on the iCheck first initialization
这段代码应该放在iCheck第一次初始化
$(document).on('ifChecked', '#mycheckbox', function() {
$(this).addClass('selected');
});
$(document).on('ifUnchecked', '#mycheckbox', function() {
$(this).removeClass('selected');
});
回答by Eddu Diaz Salazar
Try this:
试试这个：
$('input').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
if you want to set from specific div try this:
如果你想从特定的 div 设置试试这个：
$('#MyDivId input').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
Check the documentation on http://icheck.fronteed.com/
回答by Ke Lu
I just encountered the same problem and the solution is simple: call the iCheck method.
我刚遇到同样的问题，解决方法很简单：调用 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'});
