JQ實現向動態元素添加事件

最近做的工作需要添加微信統計,然後頁面裏是動態添加的模擬對話,需要給動態添加的元素添加點擊複製事件。

第一就想到了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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章