文档章节

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

Linklbj
 Linklbj
发布于 2016/12/01 21:35
字数 458
阅读 90
收藏 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之trigger()

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

freedonn
2014/09/13
0
0
jQuery中.live()方法的使用方法

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

风子
2012/09/12
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 动态添加 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

没有更多内容

加载失败,请刷新页面

加载更多

设计模式之 明确责任 观察者模式 状态模式 责任链模式

观察者模式是任务分发的一种模式。 如果认为我们设计的系统的各个模块(或子系统)的最终目的是完成共同任务,那么这个任务如何分配到多个模块的就是我们遇到的第一个问题。简单设计场合我们...

backbye
14分钟前
2
0
14-利用思维导图梳理JavaSE-大汇总

14-利用思维导图梳理JavaSE-Java基础知识大汇总 主要内容 1.对象入门 2.一切都是对象 3.程序流程控制 4.初始化和消除 5.权限访问控制 6.复用类 7.多态 8.接口与抽象类 9.内部类 10.容器 11.异...

飞鱼说编程
49分钟前
5
0
利用Lombok编写优雅的spring依赖注入代码,去掉繁人的@Autowired

大家平时使用spring依赖注入,都是怎么写的? @Servicepublic class OrderService { @Autowired private UserService userService;} 是不是很熟悉的感觉?但是呢 如果你用...

HeyS1
56分钟前
25
0
IBATIS 写BLOB字段遇到的问题

1、 首先遇到的配置问题,通过设置typeHandler 来支持写入。接下来由此引出了事务的问题。 <typeHandler jdbcType="BLOB" javaType="[B" callback="org.springframework.orm.ibatis.support....

echo-neo
今天
1
0
37. Sudoku Solver

Description tags: backtrack,hash table difficulty: hard Write a program to solve a Sudoku puzzle by filling the empty cells.A sudoku solution must satisfy all of the following......

52iSilence7
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部