文档章节

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

Linklbj
 Linklbj
发布于 2016/12/01 21:35
字数 458
阅读 97
收藏 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
深圳
私信 提问
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之星
07/27
0
0
jquery 对select中的option操作

Jquery的功能很强大,下面介绍Jquery操作表单Select元素的用法: jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选...

JAVA_NINA
2011/12/05
0
0
jQuery中.live()方法的使用方法

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

风子
2012/09/12
0
0
JQuery 动态添加 option

在<select>里动态添加option JQuery: $("#selectId").append("<option value='"+value+"'>"+text+"</option>"); jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function()......

704969448
2012/06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
1
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
4
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
1
0
技术工坊|如何开发一款以太坊钱包(深圳)

【好消息!】HiBlock区块链技术工坊已经成功举办了26期,其中北京1期,西安1期,成都2期,上海22期。经常有社区的小伙伴问定期举办技术工坊的除了上海以外,其他城市有没有?现在区块链技术工...

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部