jquery中关于bind()方法的使用技巧分享

 更新时间:2017年03月30日 09:11:20   作者:Romennts  
这篇文章主要给大家分享了jquery中关于bind()方法的使用技巧,文中介绍的非常详细,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。

.bind()方法可使用.on()方法来代替

on()方法提高代码易读性,如下

$("input").bind("click", { foo: "hello" }, handler);

$("input").on("click", { foo: "hello" }, handler);

bind()绑定事件的时候,这些元素必须已经存在,而on()可以处理类似于代理这样的东东,也就是说不存在的元素(动态生成的元素也可以处理),如下动态生成的 To do list ,再双击删除,可使用on()轻松完成,你会发现,on换成bind是不行的。

<input type="text" id="str">
<button id="btn">添加</button>
<h3>To do list</h3>
<ul></ul>
$(document).ready(function(){
 $('#btn').on('click',function(){
  var str = $('#str').val();
  $('<li>').text(str).appendTo('ul'); 
  $('#str').val('');
 })

 //To do list双击删除
 $(document).on('dblclick','li',function(){
  $(this).remove();
 })
});

on()事件绑定的妙用:我们经常要在网页里面处理大量的表格,假设表格有1000行,如果为每个tr都绑定一个click事件是非常占用内存的,而更加优雅的方法是:使用父元素tbody作事件代理,只需绑定一次,子孙元素tr上发生的事件会冒泡到tbody进行处理,节省开销

//效率低下的写法
$( "#dataTable tbody tr" ).on( "click", function() { \……

//换成优雅高效滴
$( "#dataTable tbody" ).on( "click", "tr", function() { \……

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • 常见的jQuery选择器汇总

    常见的jQuery选择器汇总

    本文汇总介绍了常见的jQuery选择器知识,包含基本元素选择器、分层选择器、基本条件选择器、内容条件选择器、可见性条件选择器、属性选择器、子元素选择器、表单元素选择器、表单属性选择器。十分的详尽,有需要的小伙伴参考下吧
    2014-11-11
  • jQuery实现放大镜效果实例代码

    jQuery实现放大镜效果实例代码

    在一些电商网站我们都见到使用过放大镜来查看商品详情,那么基于jquery代码是如何实现放大镜效果的呢?下面由脚本之家小编给大家分享jquery代码实现放大镜效果
    2016-03-03
  • jQuery 1.0.4 - New Wave Javascript(js源文件)

    jQuery 1.0.4 - New Wave Javascript(js源文件)

    jQuery 1.0.4 - New Wave Javascript(js源文件)...
    2007-01-01
  • JQueryEasyUI Layout布局框架的使用

    JQueryEasyUI Layout布局框架的使用

    本篇文章小编为大家介绍JQueryEasyUI Layout布局框架的使用,有需要的朋友可以参考一下
    2013-04-04
  • jQuery中的on与bind绑定事件区别实例详解

    jQuery中的on与bind绑定事件区别实例详解

    bind与on的区别就在于–事件冒泡,关于jquery中的on与bind绑定事件的区别通过本文给大家实例讲解,需要的朋友参考下吧
    2017-02-02
  • jQuery实现Tab菜单滚动切换的方法

    jQuery实现Tab菜单滚动切换的方法

    这篇文章主要介绍了jQuery实现Tab菜单滚动切换的方法,实例分析了jQuery通过鼠标事件动态操作页面元素切换的动画效果实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery隐藏和显示效果实现

    jQuery隐藏和显示效果实现

    这篇文章主要介绍了jQuery隐藏和显示效果实现的相关资料,需要的朋友可以参考下
    2016-04-04
  • jQuery UI插件自定义confirm确认框的方法

    jQuery UI插件自定义confirm确认框的方法

    这篇文章主要介绍了jQuery UI插件自定义confirm确认框的方法,实例分析了jQuery的UI插件使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • jQuery实现贪吃蛇小游戏(附源码下载)

    jQuery实现贪吃蛇小游戏(附源码下载)

    网上关于JS实现贪吃蛇的文章有很多,最近闲来无事,想着利用jQury来实现贪吃蛇小游戏,下面实现这篇文章主要介绍了利用jQuery实现贪吃蛇小游戏的方法,文中给出的是吸纳思路和示例代码,需要的朋友可以参考下。
    2017-03-03
  • jQuery实现页面滚动时层智能浮动定位实例探讨

    jQuery实现页面滚动时层智能浮动定位实例探讨

    在博客或者微博上面也会见到这个效果,所以客户就也想要这样的效果了,接下来为大家详细介绍下浮动定位实现的过程,感兴趣的朋友可以参考下哈
    2013-03-03

最新评论