JQuery append 追加的元素裏觸發的事件

時間 2020-02-06

原文原文鏈接

JQuery 的 append() 方法能夠在被選元素的結尾（仍然在內部）插入指定內容。可是如何觸發追加元素的事件？下面我來談談，僅做記錄。建議拷貝運行看看。。javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
	.blue{
		background-color:blue;
		color:#ffffff;
	}
    </style>
</head>
<body>
    <div id="fillIt" style='width:500px;height:60px;background-color:yellow;font-size:24px;'> 填充HTML </div>
	<br />
    <div id="payConfirm" style='width:500px;height:1000px;background-color:red;font-size:24px;'>
    </div>
</body>
</html>
 
<script type="text/javascript">

	$(document).ready(function() {
		// click 有 200~300 ms 延遲
		$('#fillIt').on('click',function(){
			$('#payConfirm').append('<div id="zfbPay" class="blue">支付寶支付</div> <br /> <div id="wechat" class="blue">微信支付</div>');
		})

		$('zfbPay').click(function(){
			alert('追加的DOM元素，click 我這不起做用');
		})

		$('wechat').click(function(){
			alert('追加的DOM元素，click 我這不起做用');
		})

		$('#payConfirm').on('click','#zfbPay',function(e){
			alert('追加的DOM元素，須要這樣子才管用');
			// 阻止事件冒泡 方法一
			// 只阻止事件往上冒泡，不阻止事件自己
			e.stopPropagation();

			// Hello 事件也會執行
			alert('Hello');
		})

		$('#payConfirm').on('click','#wechat',function(){
			alert('追加的DOM元素，須要這樣子才管用');
			// 阻止事件冒泡 方法二
			// 不只阻止了事件往上冒泡，並且阻止了事件自己。
			return false;

			// Hello 事件不會執行
			alert('Hello');
		})

		// 事件會冒泡 這裏它也會觸發
		$('#payConfirm').on('click',function(){
			 alert('假如我原本就有事件呢？事件會冒泡');
		 })

		// Top 沒有 200~300 ms 延遲。要引入 JQuery Mobile 才能使用
		// $('#payConfirm').on('top',function(){
			// alert('追加的DOM元素，須要這樣子才管用');
		// })


	})
</script>

在jQuery 1.7中，.on()方法提供綁定事件處理程序所需的全部功能。click()觸發的是頁面元素裏的事件。但執行上面的代碼，append()以後，你查看源代碼，$('#payconfirm')裏面是沒有添加的HTML元素的。html

(●'◡'●)。。java