當我們使用jQuery動態加載html元素，但是元素上面又綁定了Click等事件，針對新添加的元素這些事件是無效的，那么應該怎樣解決呢？
live方法
live( type, fn )
jQuery 1.3中新增的方法。給所有當前以及將來會匹配的元素綁定一個事件處理函數（比如click事件）。也能綁定自定義事件。
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
還不支持 blur, focus, mouseenter, mouseleave, change, submit
與bind()不同的是，live()一次只能綁定一個事件。
這個方法跟傳統的bind很像，區別在於用live來綁定事件會給所有當前以及將來在頁面上的元素綁定事件(使用委派的方式)。比如說，如果你給頁 面上所有的li用live綁定了click事件。那么當在以后增加一個li到這個頁面時，對於這個新增加的li，其click事件依然可用。而無需重新給 這種新增加的元素綁定事件。比如下面的代碼。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").live("click",function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>這是一個段落。</p>
<button>請點擊這里</button>
</body>
</html> |
on 方法
但是隨着jQuery的版本升級，自從jQuery 1.9及其以上已經無法使用live了，那么沒有辦法了嗎，不是的，對於jQuery1.9版本及其以上可以使用on，其效果等同於live。下面的on的使用方法
1 2 3 4 5 6 7 |
<script> $(document).on("click", ".waiting-save", function () { $(this).html('@T("Saving...")') $(this).attr("disabled", ""); SaveAction(this); }); </script> |
本文鏈接地址: 解決使用jQuery采用append添加的元素事件無效的方法