Ajax更新页面后控件失效，如何获取？

Question

Ajax请求后渲染模板页替换页面内容：

$.get(url, {...}, function(particalPage, status) {
  if (status = "success") {               
    $("#contentBox").html(particalPage);
  }
});

模板页中表格的tbody中每行有复选框,tfoot中有复选框 ，应用了iCheck插件

//tbody>tr
<label class="check ">
  <input type="checkbox" class="icheckbox" value="<% =item.id%>"/>
</label>

//tfoot
<label class="check">
  <input type="checkbox" class="icheckbox" id="iCheckAll"/>
</label>

页面JavaScript 实现全选/全不选

$('#iCheckAll').on('ifChecked', function(event) {     
  $('input.icheckbox').iCheck('check'); 
}); 
$('#iCheckAll').on('ifUnchecked', function(event) {   
  $('input.icheckbox').iCheck('uncheck'); 
});

现在的情况是，Ajax更新后，iCheck样式失效，全选/全不选失效，使用jQuery获取Checkbox是否选中及value也没有作用，求破！！

Answer 1

DOM元素替换了，事件都没有了，需要重新初始化icheck插件

Answer 2

楼上说的对，你将这个table初始化的部分编写成独立函数，在table修改后，从新调用一次，最好的方法是调用你所用的框架的函数来绑定函数，因为绑定事件是在页面加载的时候完成，但是你动态插入页面的时候却需要手动绑定事件，所以找到框架的相应函数，手动调用一次。否则你自己对table中的全部选中框手动添加事件，还有相应的数据处理等等！所以你最好别这样子写代码动态插入页面，除非你使用的框架的功能足够完善

Answer 3

遇到同样的坑了，同样是icheck插件，虽然时间有点久，这里直接上代码
原理就是动态加载的元素绑定事件无效，需要用到事件委托

<div class="list-wrap item-list">
        <ul class="list clearfix">
            <li>
                <div class="pic">
                    <img src="images/list-img1.jpg" alt="">
                </div>
                <div class="txt">
                    <div class="name">
                        <span>标题文字标题文字</span>
                        <em>描述文字描述文字</em>
                    </div>
                    <div class="icheckbox">
                        <input type="checkbox" name="citem[]">
                    </div>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="images/list-img2.jpg" alt="">
                </div>
                <div class="txt">
                    <div class="name">
                        <span>标题文字标题文字</span>
                        <em>描述文字描述文字</em>
                    </div>
                    <div class="icheckbox">
                        <input type="checkbox" name="citem[]">
                    </div>
                </div>
            </li>
        </ul>
    </div>
<script src="../public/js/jquery-3.3.1.min.js"></script>
<!-- icheck2.0 https://github.com/fronteed/icheck/tree/2.x-->
<script src="../public/js/lib/icheck.min.js"></script>

function chooseItem() {
    var checktxt = "点击选择";
    var checkedtxt = "已选择";
    if($('.item-list li').find('input').length>0){
        $('.item-list li').find('input').each(function(i){
            var self = $(this);
                self.icheck('destroy'); // 先销毁再创建，否则之前的列表点击无法选择
                self.icheck({
                autoAjax: true,
                checkboxClass: 'icheckbox-item',
                insert: '<span data-checked="'+checkedtxt+'"  data-unchecked="'+checktxt+'">' + checktxt +'</span>'
            });
            // console.log(i);
        });
    }
}
chooseItem();

// 绑定事件
$('.item-list').on('ifChecked','input', function(event){
    _span = $(this).parent().find("span");
    _span.html(_span.attr("data-checked"));
    // do something
});
$('.item-list').on('ifUnchecked','input', function(event){
    _span = $(this).parent().find("span");
    _span.html(_span.attr("data-unchecked"));
    // do something
});

$.ajax({
    type: 'GET',
    url: 'http://xxxx.com/json.php?page='+page+'&size='+size,
    dataType: 'json',
    success: function(data){
        var arrLen = data.length;
        if(arrLen > 0){
            for(var i=0; i<arrLen; i++){
                result +=   '<li>'+
                            '<div class="pic"><img src="'+data[i].pic+'" alt=""></div>'+
                            '<div class="txt"><div class="name">'+
                            '<span>'+data[i].title+'</span>'+
                            '<em>data[i].des</em></div>'+
                            '<div class="icheckbox">'+
                            '<input type="checkbox" name="citem[]">'+
                            '</div>'+
                            '</div>'+
                        '</li>';
            }
        }else{
            alert('no data!');
        }
        $('.list').append(result);
        chooseItem(); // icheck
    },
    error: function(xhr, type){
        alert('Ajax error!');
    }
});