1. 程式人生 > >JQ動態繫結

JQ動態繫結

JQ中的on()方法

  1. 語法 : $(selector).on(event,childSelector,data,function)
    event:必需。規定要從被選元素移除的一個或多個事件或名稱空間。

childSelector:可選。規定只能新增到指定的子元素上的事件處理程式(且不是選擇器本身,比如已廢棄的 delegate() 方法)。

data:可選。規定傳遞到函式的額外資料。

function:可選。規定當事件發生時執行的函式。

事例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>這是個事例</p>
			<p>這是個事例</p>
			<p>這是個事例</p>
		</div>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script>
			$(function() {

				bindBtn();
			});

			var bindBtn = function() {
				$("body").on("click", "p", function() {
					$("<p>這是個事例</p>").appendTo("div");
				});
			}
		</script>
	</body>

</html>

這種方法,對現存在的DOM元素節點或是動態建立的節點都有效果