您的位置：首页 > 移动开发

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

2016-12-01 00:00 363 查看

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元素的。

(●'◡'●)。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Append on 冒泡

相关文章推荐

新的分享

章节导航

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

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