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

JQuery append 追加的元素里 触发的事件

JQuery append 追加的元素里触发的事件