文档章节

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

Linklbj
 Linklbj
发布于 2016/12/01 21:35
字数 458
阅读 62
收藏 0
点赞 0
评论 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
深圳
Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 前天 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈 ⋅ 04/14 ⋅ 0

Zepto.js简介(第二章)

接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 zepto同jquery不同的API attr同pro...

张靖bibibi ⋅ 昨天 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 06/18 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge ⋅ 05/19 ⋅ 0

javascript插入before(),after()新DOM方法

随着web的技术突飞猛进的发展。HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 before()...

急速奔跑中的蜗牛 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 29分钟前 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 40分钟前 ⋅ 0

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api.DATA ls_appl_object TYPE gos_s_obj.DA...

JerryWang_SAP ⋅ 58分钟前 ⋅ 0

云计算的选择悖论如何对待?

导读 人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云...

问题终结者 ⋅ 今天 ⋅ 0

637. Average of Levels in Binary Tree - LeetCode

Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这个树,把map里面填值,遍历结束后,再遍历这个map,把每...

yysue ⋅ 今天 ⋅ 0

IDEA配置和使用

版本控制 svn IDEA版本控制工具不能使用 VCS-->Enable Version Control Integration File-->Settings-->Plugins 搜索Subversion,勾选SVN和Git插件 删除.idea文件夹重新生成项目 安装SVN客户......

bithup ⋅ 今天 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部