文档章节

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

Linklbj
 Linklbj
发布于 2016/12/01 21:35
字数 458
阅读 119
收藏 0

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

(●'◡'●)。。

© 著作权归作者所有

共有 人打赏支持
Linklbj
粉丝 0
博文 4
码字总数 1550
作品 0
深圳
私信 提问
UI 设计

UI设计 通过 jQuery,可以很容易地添加新元素/内容。 添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: • append() - 在被选元素的结尾插入内容 • prepend() - 在被选元素...

Ryan小卫
2015/04/28
2
5
jQuery中.live()方法的使用方法

jQuery中.live()方法的使用方法 live(type, [data], fn) 概述 jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。 这个方法是基本是的 .bind() 方法的一...

风子
2012/09/12
0
0
jquery之trigger()

这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。 <script type="text/javascrip...

freedonn
2014/09/13
0
0
jQuery DOM操作之插入节点方法

方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p> appendTo() 将所有匹配的......

指尖跳动的精灵
2015/03/02
0
0
5)bootstrcp和ajax技术的使用和介绍

JQ的dom用法: append:追加 Title

tty之星
2018/07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

详解webpack-dev-server的简单使用

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的...

前端攻城老湿
22分钟前
0
0
深度解析JavaScript事件对象

这篇文章主要介绍了JavaScript事件对象,结合实例形式深入分析了javascript DOM、IE及其他浏览器相关事件对象操作技巧与注意事项,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可...

前端攻城小牛
23分钟前
0
0
Android下拉刷新开源框架

添加依赖 //下拉刷新 implementation 'com.jcodecraeer:xrecyclerview:1.5.9' xml引用 <com.jcodecraeer.xrecyclerview.XRecyclerView android:id="@+id/act_xrecycler......

lanyu96
29分钟前
0
0
Linux内核中ioremap映射的透彻理解

几乎每一种外设都是通过读写设备上的寄存器来进行的,通常包括控制寄存器、状态寄存器和数据寄存器三大类,外设的寄存器通常被连续地编址。根据CPU体系结构的不同,CPU对IO端口的编址方式有两...

天王盖地虎626
33分钟前
1
0
Collection中的之retainAll()方法的理解

//在jdkapi中的方法,说明返回值为boolean类型, boolean retainAll(Collection<?> c) ; //api中给的注释 //Retains only the elements in this list that are contained in the specified......

南桥北木
36分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部