首页 » jQuery » JQuery——通过js拼接的元素不触发事件

JQuery——通过js拼接的元素不触发事件

原文 http://blog.csdn.net/qq_36769100/article/details/79164356

2018-01-26 02:00:09阅读(466)

1.简述

- 解决办法:使用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文档 .

3.问题实例

页面代码

<div class = "tree">
    <ul class = "tree_ul">
        <a class="ne_font">弹窗</a>
    </ul>
</div>

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()等,而且方法的参数形式还可能不太一样.

详情请参照:参考别人的传送门

如果有书写错误的地方,或者是有问题的地方请及时评论或者是私信,以免误导个别萌新。
虽然,我也是个萌新。
        你好,我叫吕小布

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹