- 浏览: 1095393 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
通过下面的一个实例理解 jQuery 的 live(), delegate(), on() 方法
How to bind event to element after generated?
页面元素如何在生成后绑定事件?
Question:
I have this script :
and I have this element :
and I have another script to load some html :
in my result from ajax I have some button that have .btn-delete-confirm class
but when clicked on them nothing happen .
the sample of result like this :
how can I resolve this ?
Answer:
I would like to know which version of jQuery are you using?
According to the jQuery documentation:
.live() could have been used to bind events to future elements, but it has been deprecated.
.delegate() and .on() can be used for this
purpose now. I can see that the code you wrote uses .on().
This should work fine unless you are not using version 1.7+.
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.
As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.
- For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live().
- To remove events bound with .on(), see .off().
- To attach an event that runs only once and then removes itself, see .one()
.delegate( selector, eventType, handler ) - Returns: jQueryversion deprecated: 3.0
Description:
Attach a handler to one or more events for all elements that match
the selector, now or in the future, based on a specific set of root elements.
Examples:
------------------------------------------------------------------
Answer 2:
You are trying to add an eventlistener to something that isnt there yet.
This will result in an error, and the event wont fire again.
So try to add the listener AFTER the ajax import.
comments:
- I dont want to repeat the same code .
- your answer destroys the elegance of delegation of events for dynamic elements.
-
引用请注明:
原文出处:http://lixh1986.iteye.com/blog/2341345
-
How to bind event to element after generated?
页面元素如何在生成后绑定事件?
Question:
I have this script :
$(window).load(function () { $(document).on('click', '.btn-delete-confirm', function () {...}); });
and I have this element :
<div id="attachments"></div>
and I have another script to load some html :
$(document).on('click', '.nav-tabs li a[href="#attach"]', function () { $.ajax({ url: loadAttachmentsURL, data: { equipmentId: equipmentId }, success: function (data) { $("#attachments").html(data); } }); });
in my result from ajax I have some button that have .btn-delete-confirm class
but when clicked on them nothing happen .
the sample of result like this :
<td><a data-id="73b2db39-199c-845c-8807-6c6164d2d97d" data-url="/Admin/EquipmentAttachment/Delete" class="btn-delete-confirm btn">Delete</a></td>
how can I resolve this ?
Answer:
I would like to know which version of jQuery are you using?
According to the jQuery documentation:
.live() could have been used to bind events to future elements, but it has been deprecated.
.delegate() and .on() can be used for this
purpose now. I can see that the code you wrote uses .on().
This should work fine unless you are not using version 1.7+.
引用
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.
As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.
- For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live().
- To remove events bound with .on(), see .off().
- To attach an event that runs only once and then removes itself, see .one()
引用
.delegate( selector, eventType, handler ) - Returns: jQueryversion deprecated: 3.0
Description:
Attach a handler to one or more events for all elements that match
the selector, now or in the future, based on a specific set of root elements.
// jQuery 1.4.3+ $( elements ).delegate( selector, events, data, handler ); // jQuery 1.7+ $( elements ).on( events, selector, data, handler );
$( "table" ).delegate( "td", "click", function() { $( this ).toggleClass( "chosen" ); });
$( "table" ).on( "click", "td", function() { $( this ).toggleClass( "chosen" ); });
Examples:
$( "body" ).delegate( "p", "click", function() { $( this ).after( "<p>Another paragraph!</p>" ); });
------------------------------------------------------------------
Answer 2:
You are trying to add an eventlistener to something that isnt there yet.
This will result in an error, and the event wont fire again.
So try to add the listener AFTER the ajax import.
$(document).on('click', '.nav-tabs li a[href="#attach"]', function () { $.ajax({ url: loadAttachmentsURL, data: { equipmentId: equipmentId }, success: function (data) { $('#attachments').html(data); $('.btn-delete-confirm').on('click', function () {...}); } }); });
comments:
- I dont want to repeat the same code .
- your answer destroys the elegance of delegation of events for dynamic elements.
-
引用请注明:
原文出处:http://lixh1986.iteye.com/blog/2341345
-
发表评论
-
Javascript 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2467为什么使用 javascript 测试框架时,没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数(Arrow Function)
2018-01-25 13:46 1064一、简介 箭头函数(Arrow Function)是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2273刚出来不久的 ES8 包含了 async 函数,它的出现,终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 569点此查看全部: http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1561jQuery 3.2.1 Support Deskto ... -
基于HTML5实现的中国象棋游戏
2017-06-24 02:24 1631HTML5实现中国象棋游戏 http://www.w2bc.c ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3907浏览器处于安全原因,在使用 Ajax 进行请求访问时,不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 92325 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 635效果图: function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 692jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 630attr() 用于自定义属性,id ; prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 628Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2147JS操作iframe 1. 获得iframe的w ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1055前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 818详说 Cookie, LocalStorage 与 ... -
javascript之小应用:网页在线聊天
2016-11-08 11:48 4222概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10161. 判断两个字符串是否:字母相同切长度相同(空格不算)。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 843函数继承可以分为两种:1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 668一、用法 undefined 关键字有两种用法: 1. 如 ... -
javascript之 == vs ===
2016-06-12 15:59 628一、Comparison Overview 1. Speed ...
相关推荐
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解共8页.pdf.zip
本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法。分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳...
在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on(),有些同学会对这四者存在一些疑虑,所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料,...
jQuery就是如此强大,你可以轻易地找到DOM中的任何元素,而这也是jQuery设计之初query的真实含义(查询)。 编辑本段Jquery对象 jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象...
之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的。 jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用。所以这里我们主要就看下以下三个方法:bind()、...
delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法...
jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率...
bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。 .bind(eventType[, evnetData], Handler(eventObject)) 其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如...
主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下
因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个...
对未来的元素绑定事件不能用bind, 1、可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了。 2、推荐用on代替(注:1.7及以上的版本才支持)。用法:on...
(Bug) stopImmediatePropagation was not being honoured in live/delegate event handlers (#7217) (Bug) Fixed an issue where host and protocol were not compared case-insensitively when determining ...
jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()————————-版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()————————–版本号小于1.7(在Jquery1.7中已经...
jquery api官方的例子在新增的元素上添加事件 $[removed]("click",'#lyysb a'...自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。 注意:使用 on() 方法添加的事件处理程序适用于
因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个或...
因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个或...