解决jQuery新增元素⽆法绑定事件的⽅法
解决jQuery新增元素⽆法绑定事件的⽅法
在写html时，我们往往想要通过JavaScript来为页⾯添加⼀些事件特效.
例如：我们想在点击某⼀元素（例如按钮等）来为⽹页添加新的元素，当你再想在你点击事件新增的元素中在绑定⼀个事件时往往会出现以下问题。
在写JS代码中我们常常⽤页⾯加载事件load事件来触发事件，但是触发的事件的元素有动态和静态之分。
动态元素写在你所写的触发事件中能够检测到的，⽽静态元素往往是不能检测到的。列如下图
我在HTML⽂本中引⼊了JQuery的js⽂件在HTML的body中创建两个div，第⼀个div⾥我放了⼀个按钮并且给按钮⼀个ID是addElement，同时给它⼀个⿏标点击事件，触发的内容是在我第⼆个ID是content的div⾥添加⼀个ID是pageElement的段落标签p标签。
同时在给这个P标签⼀个⿏标点击事件，效果是移除页⾯上所有的元素，达到清空页⾯的功能。
理想状态下我们可以点击“添加元素”这个按钮会在按钮下⽅⽣成⼀段⽂字，然后再点击⽣成的⽂字后，页⾯上所有的元素都会清空，整个⽹页都是空⽩
运⾏⼀下代码
当我打开页⾯时是只有⼀个按钮，当我点击按钮时会出现⼀段⽂字，如下图
jquery在一个元素后追加标签然⽽在我点击段落标签后，页⾯上所有的元素并没有消失，还是⼀动不动的在⽹页上。这就是静态元素与动态的元素的区别。那么怎么样才能让元素消失呢？
这个问题的问题点是我们新增加的元素不在⽅法的识别范围之内，我们把代码写在了JQury的read⽅法中，这个⽅法的意思是当⽂档准备就绪，也就是页⾯上所有的节点(元素)加载完毕时开始执⾏⽅法⾥⾯的内容。这个问题是ready⽅法执⾏完毕了获取到了我们第⼀个div中的按钮的id并且给它绑定⼀个点击事件，所以我点击按钮时触发了⽅法，⽽P标签是在我们点击按钮时才⽣成的，此时ready⽅法运⾏完毕是发现只是到了按钮的id，并没有发现p标签的ID，也没有给p标签绑定事件，所以我们点击⽂字是没有任何的反应的！
那么我们怎么解决这个问题呢
这个时候我们可以意识到，新增加的元素没有被绑定事件，那么我们给它重新绑定⼀个事件不就是可以了吗？
此时我们的代码可以改成这样
我们可以在ready⽅法外⾯新建⼀个⽅法，在⽅法⾥⾯写⼀个函数，并且给新增加的函数绑定事件就可以达到理想的效果，让我们看⼀下实际效果
⼀，打开⽹页后
⼆，点击按钮后
三，点击⽂字后
通过给元素重新绑定事件，就可以给通过页⾯加载后新创建的元素来绑定事件
这是个简单的逻辑关系，也是我之前犯错的地⽅。希望对你有所帮助，喜欢本⽂章的可以点个赞，或者可以留下你宝贵的意见与评论。感谢你的阅读！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。