jQuery使用bind动态绑定事件无效的处理方法

最近在进行页面开发，在做页面特效的时候，需要给一个动态加载的按钮赋予一个事件

于是不假思索的 用$(obj).bind();  来绑定事件 。

但是这样存在一个问题：

bind确实能绑定事件，但是那是相对于固定的html标签来说

当页面内容属于动态加载的时候，bind事件就存在一个bug,  只能bind一次，当你第二次触发事件的时候就没用了

例如：

我给<a>标签赋予一个click ， <a>标签包括内容都是从后台数据读取然后动态加载的。当我使用bind来绑定click事件，这时， 第一次点击click能成功触发

但是第二次点击，click事件无效了.

后面研究发现，jQuery还有个绑定事件的方法：delegate();  用法如下：

$(".sentnum-box").delegate(".a-add-ordergoods","click",function(){
  //js数据代码
});

这样就能实现对动态数据绑定事件，并永不失效

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

赞 (0)

相关推荐

  • Vue.js中用v-bind绑定class的注意事项

    Vue.js中用v-bind绑定class的注意事项

    前言 在Vue.js版本:1.0.27,使用Vue.js中V-bind指令来绑定class和style时,Vue.js对其进行了增强.表达式结果出了字符串之外,还可以是对象或者数组. 这里自己对其进行了测试,发现有一下的问题: 如果使用对象语法对class进行绑定话,class名称必须加上引号,代表所对应的样式,否则会将其当做对象的属性,从而使得初始化报错. <!DOCTYPE html> <html lang="en"> <head> <me

  • 浅谈jQuery的bind和unbind事件(绑定和解绑事件)

    绑定其实就是把一些常规时间绑定到页面,然后进行各种常规操作 解绑就是接触绑定,绑定的事件失效 要注意,iQuery中的  .事件  如(.click())其实就是单个的绑定事件的简写(bind("click")) html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>02_事件绑定.html&

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

    on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" . selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代. data:当一个事件被触发时要传递event.data给事件处理函数. fn:该事件被触发时执行的函数. false 值也可以做一个函数的简写,返回false. bind(type,[data],fn) 为每

  • jQuery使用bind函数实现绑定多个事件的方法

    本文实例讲述了jQuery使用bind函数实现绑定多个事件的方法.分享给大家供大家参考,具体如下: 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleave", function() { $(this).toggleClass("entered"); }); 在1.4版本以后,也可以如下绑定 $("#foo").bind({ click: func

  • 详谈jQuery unbind 删除绑定事件 / 移除标签方法

    jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提供了事件类型作为参数,则只删除该类型的绑定事件.如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 返回值: jQuery 参数: type (String) : (可选) 事件类型 data (Function): (可选)

  • jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------

  • 在vue中v-bind使用三目运算符绑定class的实例

    如图所示: 通过动态的切换isOk就可以达到切换class的效果,isOk可以为一个表达式如num>1,如果data中num大于1,则显示classA,否则显示classB 以上这篇在vue中v-bind使用三目运算符绑定class的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery的三种bind/One/Live/On事件绑定使用方法

    本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下 今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(eve

  • jQuery绑定事件方法及区别(bind,click,on,live,one)

    第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("hello world click") }) }) 第二种方式(简写方式为第一种): $('#clickmebind').bind("click", function(){ alert("Hello World bind"); }); 第三种方式: $('#clickmeon'

  • Android DataBinding的官方双向绑定示例

    在Android Studio 2.1 Preview 3之后,官方开始支持双向绑定了. 可惜目前Google并没有在Data Binding指南里面加入这个教程,并且在整个互联网之中只有这篇文章介绍了如何使用反向绑定. 在阅读一下文章之前,我假设你已经知道如何正向绑定. 回顾一下Data Binding 在正向绑定中,我们在Layout里面的绑定表达式是这样的: <layout ...> <data> <variable type="com.example.mya

随机推荐