最近做的工作需要添加微信統計,然後頁面裏是動態添加的模擬對話,需要給動態添加的元素添加點擊複製事件。
第一就想到了JQ的bind事件,可是經過測試發現,bind事件不能給動態添加的元素進行事件添加,不能放棄啊,繼續探索,終於功夫不負有心人,發現on事件可以實現這個效果。廢話不多說,上代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ON事件</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="content"><button>按鈕</button></div>
<a href="javascript:;" onclick="add()">添加新元素</a>
<script type="text/javascript">
var add = function(){
$("#content").append('<button>按鈕</button>');
}
$("body").on('click','button',function(event){
alert("這是動態添加的事件");
});
</script>
</body>
</html>
下面對on事件進行簡單的說明:
概述:在選擇元素上綁定一個或多個事件的事件處理函數。
on()方法綁定事件處理程序到當前選定的jQuery對象中的元素。
使用 on() 方法添加的事件處理程序適用於當前及未來的元素(比如由腳本創建的新元素)。
語法:$(selector).on(events,childSelector,data,function)
events:一個或多個用空格分隔的事件類型和可選的命名空間,如"click"或"keydown.myPlugin" 。
selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代。如果選擇的 null 或省略,當它到達選定的元素,事件總是觸發。
data:當一個事件被觸發時要傳遞event.data給事件處理函數。
fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫,返回false。
提示:如需移除事件處理程序,請使用 off()方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>off實例</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});
</script>
</head>
<body>
<p>點擊這個段落修改它的背景顏色。</p>
<p>點擊一下按鈕再點擊這個段落( click 事件被移除 )。</p>
<button>移除 click 事件句柄</button>
</body>
</html>