js中ajax请求数据之后的按钮事件失效

先说

其实关注简书很久了,大半年了,但是自己总是忘记抽时间出来写下。

嘻嘻今天决定开始写第一篇文章,以后遇到的问题解决之后都来这里分享下。[乖巧]

发现问题

 这两天,我在学着用js的ajax绑定数据,一切都很正常,但是之后我遇到了一个bug,

图一(更改前)


1. 上面是我的初始化数据时候的一段点击事件,准备获取到一个id请求另一个页面,但是当我去点击的时候,无论怎么点击都是没有反应,什么样式都没有。

2. 首先我去检测,就用了个alert去检测是否代码问题,后来发现毫没有弹出内容,之后检测我的选择绑定事件的元素是否错误,但最终发现都没有问题。

3. 然后,我发现是,一个“事件委托”问题,就是ajax载入新的DOM之前js已经加载完毕了,事件就不会绑定到新的DOM上面,就像我上面的给#tab-span想绑定一个点击事件,但是最终是没有用的,

解决问题

后来我就给添加了一个事件委托,给要点击的元素绑定父元素


图二(更改后)

    #1. 上面就是我修改过后的click事件,亲测可以的。

    #2. 给click事件重新绑定事件,加了委托。有点击事件的是#tab-span这个元素,我给绑定到父级".table-item"(这里可以是其他的父元素,比如body也可以),将事件委托。

    上面的原理就是:等事件冒泡到父元素再进行事件的处理。但是上面说的绑定到body,我本人不太建议,因为如果要是你的页面绑定几百个事件,就真的完蛋咯

    #3. 最后有个老版本的live绑定事件,但是在jquery1.9+之后就没有了,谨慎使用

写在最后

照着上面的委托,正常来说都是没问题的,如果有问题的话先看自己绑定的元素是否错了,还有父元素也是,

当然这个只是说ajax请求数据之后的click事件失效,没有请求数据一般click事件正常像我第图一样写是不会失效的。

如果有什么请教的可以留下哦,谢谢。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,359评论 19 139
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 10,956评论 0 106
  • 【蹦蹦跳跳皮皮猴】20171203学习力践行d53 昨天不小心把U盘落在床头柜上,立马落到小朋友手上,得意的拿着U...
    汤伊森阅读 1,001评论 0 0
  • 和你风雨走过20年,仿佛又回到从前……。 那种踏实,厚重的安全感,是你给我的全部爱,,,,。我知道你也是爱我的,只...
    王ai杜阅读 1,839评论 0 0
  • 楔子 入秋的莆田没有北方那么寒,只是早晚温差大而已。顾筱坐在公交车上最后一排,手机的提示音在这时响了起来,她颤...
    顾阮陉阅读 3,297评论 0 0