jq动态添加的元素触发绑定事件
文章 2722 0 0 0
发布时间:2018年09月13日

概述

在做一些项目的时候都需要去动态添加一些节点,比如添加商品规格动态生成一个或多个供用户使用或者生成一个点击按钮删除按钮等,都是动态生成的dom节点,但是为这些动态的节点添加点击事件就发现点击没有效果

$(".jwg_add_upload_img_pic").click(function(){
    i++
    var pic = '<div class="pic">'+
        '<input type="button" class="pic_button" id="jwg_sctp'+i+'" onclick="jwg_tpyl'+i+'.click();"  />'+
        '<input type="file" class="pic_flie" name="pic[]" id="jwg_tpyl'+i+'">'+
        '</div>';
    $(".jwg_upload_img_pic").append(pic);
})

点击圆加号进行添加,在生成一个方块的图片上传节点,点击生成以后点击file文件,发现无法触发.pic_button节点点击事件

$('.pic_button').click(function(e){
    alert("点击我了")
})

jq动态添加的元素触发绑定事件

解决方法:

$('.jwg_upload_img_pic_xq').on('click','.pic_button',function(e){
})
$('父元素').on('click', '子元素', function(){})

具体参数信息:

on(events,[selector],[data],fn)

此时动态加载出来的元素一定要在$(‘父元素’)里面,否则绑定事件失效。换句话说,本应该绑定A元素,但是A元素是动态生成的,所以jq应该获取A元素的父元素来监听A元素是否发生click事件。

举个例子

events:一个或多个用空格分隔的事件类型和可选的命名空间,如“click”“keydown.myPlugin”
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false

有人提出了事件委托,那么对于这种动态添加的事件,我建议这么写:

function $domOfSth(text){
    return $("<a href='#' class='tseleced btn_confirm'>"+text+"<span class='tags_closebtn'>X</span></a>").on('click','.tags_closebtn',function(){
        console.log('xxxx');
    });
}
$('#xxx').append($domOfSth('xxx'));

这样的优势在于:

$domOfSth函数里面,这个dom可以绑定事件的写法相当灵活

对于事件一目了然,可维护性好

事件绝对牢牢绑定在插入dom上,不会因为js读到$(".tags_closebtn")这一句的时候,页面找不到这个对象的尴尬。。。
这个尴尬刚好是你点击事件未绑定到插入的dom上的原因。因为,js读到$(".tags_closebtn").on('click')的时候,浏览器还没更新html代码呢,然后jq就跑去找,发现tm页面上根本没有这个类,是假的,是化学的成分。。。

jQuery版本控制

<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.3.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.5.1/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.6.1/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
评论专区
Q群
Q群
Q群
反馈
纠错