关于jQuery获取不到动态添加的元素对象的问题

一、问题描述

功能:点击添加按钮,动态生成一条规格及参数的输入框,点击每一条后边的X即可删除该条数据。

问题:在添加多条规格、参数数据后,发现不能使用$('.close').click()获取动态添加的元素,只能获取到在原html中写死的元素。

<!-- 部分html-->
<div class="ad">
    <div class="weui-cell-standards" id="1" >
         <div class="weui-cell__hd_standards">
             <label class="weui-label-standards">规格</label>
             <input class="weui-input-standards" name="kv_i_f" type="text" />
         </div>
    
         <div class="weui-cell__hd_parameters">
             <label class="weui-label-parameters">参数</label>
             <input class="weui-input-parameters" name="kv_i_s" type="text" />
         </div>

         <!--删除按钮,引用了bootstraps现成的,若使用,请引用bootstraps相关css及js-->
         <button type="button" class="close" id="1"><span>&times;</span></button>
    </div>
</div>

<button class="btn btn-info" type="button">添加</button>

<!-- js -->
<script>
    var number = 1;
    //添加规格、参数
    $(".btn-info").click(function() {
        number += 1;
        var htm = "";
        htm += `
        <div class="weui-cell-standards " id=${number}>
             <div class="weui-cell__hd_standards">
                 <label class="weui-label-standards">规格</label>
                 <input class="weui-input-standards" name="kv_i_f" type="text" />
             </div>
             <div class="weui-cell__hd_parameters">
                 <label class="weui-label-parameters">参数</label>
                 <input class="weui-input-parameters" name="kv_i_s" type="text" />
             </div>
             <button type="button" class="close" id=${number}><span>&times;</span></button>
        </div>`;
    $('.ad').append(htm);
});
</script>

 

二、解决方法

在网上查阅资料后发现,动态添加的标签要事件委托才能获取到元素节点,也就是说要用on()方法绑定事件处理程序到当前jquery对象中的元素:

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

属性解析:

参数描述
events一个或多个用空格风格的事件类型和可选的命名空间,如:click。 
selector一个选择器字符串,用于过滤选定的元素。该选择器的后裔元素将调用处理程序。如果为空或被忽略,事件总是触发。
data事件触发时要传递event.data给事件处理函数
fn该事件触发时执行的函数

 举个栗子:

//删除规格、参数
$('.ad').on('click','.close',function(){
    var index = $(this).attr("id");
    $('.weui-cell-standards[id='+index+']').remove();
})

栗子解析:.ad为动态添加节点的父级节点,请使用非动态添加的父级节点,不然同样获取不到,.close就是在.ad节点内动态添加的节点。通过on方法绑定click事件,index为点击的元素的id,将点击的元素使用remove进行移除。

下面是我的实现截图:

未添加时
未添加时

  

添加数据后
又添加了两条数据后

 

删除后
点击保质期后边的删除按钮后

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页