JQuery——append的元素不触发定义好的事件

r囧r小猫 2021-06-24 15:58 450阅读 0赞

# 1.简述 #

\- 问题简述：append的元素不触发定义好的事件，页面加载完毕就存在的元素却能触发该事件；  
\- 解决办法：使用on方法，给元素绑定事件  
\- 测试JQuery版本：3.2.1.  
\- 参数规则:on(events,\[selector\],\[data\],function()),  
\- 其中：  
     events: 代表事件:click、mouseover等;  
     selector: 代表选择器，可填，可不填;  
     data: 传递的数据,可填，可不填;  
     function: 方法

例如

on("click",".ne_font",function(){   
       alert("弹弹弹");  
    }

# 2.API介绍 #

on()方法绑定事件的处理程序到选定的Jquery对象中的元素。  
     在JQuery1.7中，on()方法提供绑定事件的所有功能，代替了旧版本中的see、bind、delegate和live方法。  
     API文档传送门: [JQuery——API文档 .][JQuery_API_ .]

# 3.问题实例 #

页面代码

class=”ne\_font”的a标签绑定的事件

$(".ne_font").click(function(){ 
        alert("test alert");
    }

某个会被触发的js事件中的部分代码，作用是新增拼接的a标签

va = "<ul class = 'tree_ul'><a class='ne_font'>'append测试'</a></ul>";
    $(".tree").append(va);

当上述js被触发新增a标签后，会发现新增的a标签无法触发与其class绑定的事件。

# 4.处理办法 #

更改绑定的弹窗方法的代码:

$("body").on("click",".ne_font",function(){ 
            alert("test alert");
    });

将class=”ne\_font”的click事件绑定到父级或者是body上<是一个比较通用的方法>。  
     如果是1.7版本以前，可能会需要使用别的方法，live()、bind()等，而且方法的参数形式还可能不太一样.

详情请参照:[参考别人的传送门][Link 1]