jquery .live（動態綁定事件）

原創

2020-02-21 17:22

問題描述：

我在html頁面中根據$.getJSON獲取到的data動態的往頁面中加入checkbox，並設定了checkbox的click事件，一開始的源代碼如下所示：

$.getJSON("/ebook_template_category",
	{acid:chacid}, 
    function(data){
		$.each(data, function(i, item){
			htmlcont += '<input type="checkbox" name="acidcate" chacid='+chacid+' value='+item.etcid+' />'+item.name;
        });
        if(data)
		{
			htmlcont +='<li><input type="checkbox" id="check-all" />全選';
			htmlcont += '<span>    </span><button id="commitcate">確定</button></li>';
		}
		htmlcont += '</ul>';
		var divshow=$("#category-check").text('');
		divshow.append(htmlcont);
});

代碼中藍色部分爲我要在頁面中動態添加的checkbox元素，之後我對該元素的click事件進行綁定，使用瞭如下錯誤的方法：

$("#check-all").click(function(){
      $("input[name='acidcate']").attr("checked",this.checked);
});

$("input[name='acidcate']").click(function(){
	$("#check-all").attr("checked", $("input[name='acidcate']").length==$("input[name='acidcate']:checked").length? true:false);
});

即我用了一般的綁定事件方法，其結果爲點擊“全選”等checkbox元素，不促發相應的click事件，經google得知，動態添加到頁面中的元素需用.live進行綁定，即將綁定事件代碼做如何更改即可：

$("#check-all").live("click", function(){
      $("input[name='acidcate']").attr("checked",this.checked);
});

$("input[name='acidcate']").live("click", function(){
	$("#check-all").attr("checked", $("input[name='acidcate']").length==$("input[name='acidcate']:checked").length? true:false);
});

詳細原因請參見鏈接：http://beinet.cn/Default.aspx?id=beacd37f-2ac5-49a6-8cd9-a15b0d2f9a3f

http://blog.163.com/quan2006@126/blog/static/17022863520114421019458/