Question

我在我的复选框中使用了一个Jquery插件，插件的页面是这样的：http://fronteed.com/iCheck/#skin-line

事情是我使用Javascript函数添加新的复选框：

function add(){

        var userInput = document.getElementById('reg').value;
        document.getElementById('checklist').innerHTML = document.getElementById('checklist').innerHTML +
        "<li> <input type='checkbox'> <label>"+ userInput + "</label> </li>";
    }

    $(document).ready(function(){
      $(' input').iCheck({
        checkboxClass: 'icheckbox_polaris',
        radioClass: 'iradio_polaris',
        increaseArea: '-10%' // optional
      });
    });

我正在执行该函数的HTML，如下所示：

<p><input type="button" onclick="add()" class="bttns" value="Add"/></p>

  </div>
  <h3>Added:</h3>
</div>
<div class="scrollpersonalizado">
       <ul class="listacheck-radio" id="checklist">

          </ul>
  </div>

问题是如果我在：

中有复选框

<ul class="listacheck-radio" id="checklist">

</ul>

当页面加载时，它们具有插件的样式，但每当我单击按钮并添加一个新的复选框时，这个都不会获得插件的样式，以及那些在停止工作之前的样式。

有人可以帮忙吗？

提前致谢！

Answer 1

您需要做两件事：

停止重置整个.innerHTML，因为这会清除该子层次结构中的所有对象并创建所有新对象（丢失所有事件处理程序和样式）。
动态创建新元素并使用.append()方法，然后在创建后调用.iCheck()以继承新功能。

使用jQuery执行这两个操作的代码：

function add() {
    var userInput = $("#reg").val();
    $("<li> <input type='checkbox'> <label>"+ userInput + "</label> </li>")
        .appendTo("#checklist")
        .find("input")
        .iCheck({
            checkboxClass: 'icheckbox_polaris',
            radioClass: 'iradio_polaris',
            increaseArea: '-10%' // optional
         });
}

从概念上讲，这就是这段代码的作用：

获取reg值。
使用reg值
将其附加到现有核对表的末尾
在新的HTML片段中找到新的输入标记
在其上调用.iCheck()，用其他所需的行为/风格祝福它。

Answer 2

试试这个：

$(document).ready(function(){
  $('.scrollpersonalizado').on('click', 'input', function(){
       var userInput = document.getElementById('reg').value;
       $('#checklist').append("<li> <input type='checkbox'> <label>"+ userInput + "</label> </li>");
  }).iCheck({
    checkboxClass: 'icheckbox_polaris',
    radioClass: 'iradio_polaris',
    increaseArea: '-10%' // optional
  });
});

从动态创建输入时，使用事件委派以这种方式从onclick尝试不引人注意地删除内联button处理程序。

使用javascript onclick方法运行jquery插件

2 个答案: