Question

我使用精彩的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是一个id为container的div，它已存在于DOM树中，而n是我的对象，返回为JSON

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

有人可以指导我吗？

Answer 1

试试这个

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

Answer 2

试试这个......

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

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

Answer 3

还有另一种情况......当iCheck有回调

时

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

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

应该使用委托事件：

public function generateViews($views) {
    $this->getView('header');
    $this->getView('footer');
    //echo $this->header;
    foreach ($views as $components) {
        include_once "Application/" . $components['folder'] . $components['name'] . "/" . $components['name'] . "_Controller.php";
        $this->{$components['name']} = new $components['name'];
        //echo $this->{$components['name']}->view;
    }
    //echo $this->footer;
}

Answer 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');
});

Answer 5

试试这个：

$('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/

上的文档

Answer 6

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

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

6 个答案: