jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等。

之前使用 on 的时候一直是

$("").on('click','function(){ 
}') 

之后发现有些时候一直无法绑定(比如元素动态生成时),查看文档后发现正确用法应该是

$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
}) 

同时,注意

As this answers receives a lot of attention, here are two supplementary advises :

1) When it's possible, try to bind the event listener to the most precise element, to avoid useless event handling.

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

2) Be careful, when you add an element with an id, to ensure you're not adding it twice. Not only is it "illegal" in HTML to have two elements with the same id but it breaks a lot of things. For example a selector "#c" would retrieve only one element with this id.

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()

当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的换掉bind()

替换live()

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法

代码如下:

$('#list li').live('click', '#list li', function() {
//function code here.
}); 

on()写法

代码如下:

$(document).on('click', '#list li', function() {
//function code here.
});

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()

delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

代码如下:

$('#list').delegate('li', 'click', function() {
//function code here.
});

on()写法

代码如下:

$('#list').on('click', 'li', function() {
//function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

jquery on() 方法绑定动态元素

废话不多说了,直接给大家贴代码了。

<div id="test">
<div class="evt">evt1</div>
</div>

错误的用法,下面方法只为第一个class 为 evt 的div 绑定了click事件,使用append动态创建的div则没有绑定

<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

正确的用法如下:

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

jQuery on()绑定动态元素出现的问题小结的更多相关文章

  1. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. Html5实现首页动态视频背景的示例代码

    这篇文章主要介绍了Html5实现首页动态视频背景的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. ios – 在Swift中动态创建uiviewcontroller

    我想动态创建UIViewController而不创建类或使用Mainstoryboard.我希望它以编程方式发生.这可能吗?

  4. 使用iOS故事板动态调整UILabel的高度

    我有一个标签,它是使用iOSStoryboard布局创建的.但是,标签的内容是动态的,可以在运行时更改.如何确保根据标签中的内容调整标签的高度.我试过了:将行数设置为0设置编辑器–>适合内容的大小.但它们不起作用.标签中的文本仅以单行打印,因此某些文本不会出现在屏幕上.任何帮助将受到高度赞赏.解决方法试试这种方式你的标签应该是0的行数给标签赋予高度约束并选择高度约束然后设置大于等于,它将根据内容自动调整高度

  5. ios – 如何以编程方式动态地对UIButton的背景图像进行着色?

    我正在开发一个应用程序–或者更确切地说是一些可重用的“框架”,我很乐意在它工作时分享它.在此应用程序中,用户应该能够从颜色主题列表中进行选择.因此,应用程序必须能够以某种相当动态的方式对其UI元素进行着色.对于按钮,所有着色都不起作用.必须在此处提供正确着色的背景图像.但是为每个人准备一套背景图像只是第二好的.它不够动态和灵活.最后,解决方案可能归结为为所选和正常状态提供一个单色(灰色)梯度图像,

  6. ios – Firebase动态链接中的customURLScheme是什么?

    在documentation中它说要将以下行添加到我的AppDelegate.swift:根据我的理解,这应该是您在info.plist中添加的相同链接.但是,我很困惑为什么在quickstart-iosrepo他们决定将其等同于“dlscheme”.任何人都可以帮我理解这个方案究竟是什么?

  7. ios – 在动态构建的分段控件的导航栏中自动调整大小

    控制器将UISegmentedControl添加到导航栏.分段控件添加到控制器的viewDidLoad方法的导航栏中,但实际的段是在调用viewDidLoad后动态创建的.显示视图时,我无法自动调整分段大小.他们都被挤压,likeinthispost,虽然这里的决议不适用.如果在将分段控件添加到导航栏的右侧项目之前添加了段,则会自动调整它们的大小并在显示视图时看起来很好.这是我的代码的精简版本,如下所示.我错过了什么?

  8. Autolayout iOS 6动态表格单元格高度

    我有UITableviewCell子类.在这个单元格中,我有2个标签和一个显示评级星的视图.我想要lbl评论的动态高度来适应所有的文本.它应该扩大&根据评论的长度收缩高度.我已经实现了这一点,但没有AutoLayout如下现在我使用AutoLayout功能.如何使用Autolayout实现这一点?

  9. 动态模拟iOS动态类型系统文字大小(UIContentSizeCategory)

    解决方法多么尴尬!

  10. ios – 链接动态(Cocoa Touch)框架内的静态库

    我有一个链接到谷歌地图的动态框架(据我所见,它仍然是一个静态库,如果不是这样,只是一个框架包装).问题是,框架与静态库链接,并且似乎直接包含其代码,因为我不需要在使用框架的应用程序中链接或嵌入Google地图,并且一切正常.除非我在应用程式内使用Google地图.无论是在编译阶段获得“架构XY的未定义符号”,还是将GoogleMaps与之链接起来,然后在应用启动期间在调试控制台中收到警告墙,如:C

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部