单击“不在动态创建的事件”按钮

作者: 只怕再见是故人
发布时间: 2025-02-06 08:31:10 (16天前)
转自：

3 条回复

0#
回复此人
晴天？霹雳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以使用如下： </p> <pre> <code> $("body").find(".button-next").on('click', function(){ // your code here }) </code> </pre> </DIV>

编辑
1#
回复此人
晴天3 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您遇到了将click事件绑定到运行时不存在的元素的经典问题。在评估脚本时，元素 <code> .button-next </code> 尚未出现在DOM中，因此click事件回调不会绑定到按钮。 </p> <P> 你想要的是依靠事件冒泡：你想要监听运行时出现的元素，并查看click事件是否已从动态插入的按钮冒泡到静态元素。 </p> <P> 由于按钮实际上是作为子节点注入的 <code> #suggestion </code> ，和 <code> #suggestion </code> 保证在运行时出现在DOM中，你可以听到冒泡到的点击事件 <code> #suggestion </code> 元素代替： </p> <pre> <code> $('#suggestion').on('click', '.button-next', () => { currentTutorialCount += 1; tutorial[currentTutorialCount].set(); }); </code> </pre> <P> 一个有用的提示：始终选择的<strong> 最接近的静态DOM元素 </强> 绑定事件监听器时。强烈建议不要听冒泡的叛逆 <code> document </code> 要么 <code> body </code> ，因为它很昂贵（JS引擎必须遍历所有子节点才能找出发出事件的那个节点）。 </p> </DIV>

编辑

登录后才能参与评论