JQuery 的 append() 方法可以在被选元素的结尾(仍然在内部)插入指定内容。但是如何触发追加元素的事件?下面我来谈谈,仅作记录。建议拷贝运行看看。。
<!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元素的。
(●'◡'●)。。