处理jQuery append加入的元素绑定事件无效的方法

问题是：通过jQuery append（或者before、after，一样）新添加进网页的元素，常用的事件不能触发，比如：append了id 为 abc 的元素，那么 $(#abc).click(function(){})是没有效果的。

1. 网上说要用live()函数，亲测无效，应该是jQuery的版本问题，反正到目前为止是不能用了；

2. 解决方法：用on函数，要注意格式(楼主搞了半天，因为格式不对，哎，不说了…都是泪)

         正确格式： $("outerSelector").on('eventType','selector',function(){})；
          outerSelector 是一个一直存在的DOM， selector是你要监听点击的节点；
          所以正确的写法是（楼主代码）：$("tbody").on('click',"[name='submitbutton']",function(){....});

OK，搞定！
---------------------
作者：chijiaodaxie
来源：****
原文：https://blog.****.net/chijiaodaxie/article/details/45395913
版权声明：本文为博主原创文章，转载请附上博文链接！

我的代码：

处理jQuery append加入的元素绑定事件无效的方法

<table id="bottomLevelTable" class="layui-table" lay-filter="bottomLevelTable" lay-skin="line">
    <thead>
    <tr>
        <th style="text-align: center;align:center;" colspan="3" width="40%">起始档位</th>
        <th style="text-align: center;align:center;" colspan="2" width="37.5%">结束档位</th>
       <!-- <th style="text-align: center;align:center;" width="17.5%">保底费类型</th>-->
        <th style="text-align: center;align:center;" width="17.5%">保底费金额</th>
        <th style="text-align: center;align:center;" width="5%">操作</th>
    </tr>
    </thead>
    <tbody id="bottomCharge">
    </tbody>
</table>

//jquery 的 append()往tbody里追加一行tr.
appendBottom();
function appendBottom() {
    $("#bottomBtn").click(function () {
        var symbol = $("#bottomSymbol").val();
        $("#bottomCharge").append('<tr><td><select class=\'bottomFiles\'><option value=\'\'>请选择</option><option value=\'00\'>0</option><option value=\'0\'>50</option><option value=\'1\'>100</option><option value=\'2\'>200</option><option value=\'3\'>300</option><option value=\'4\'>500</option><option value=\'5\'>1000</option><option value=\'6\'>2000</option><option value=\'7\'>3000</option><option value=\'8\'>5000</option><option value=\'9\'>6000</option><option value=\'10\'>10000</option></select></td><td><select class=\'bottomSymbol\' disabled=\'disabled\' lay-filter=\'bottomSymbolChange\'><option value=\'0\' selected>&lt;</option><option value=\'1\'>&lt;=</option></select></td><td><label>A</label></td><td><select class=\'bottomSymbol2\' disabled=\'disabled\' lay-filter=\'bottomSymbolChange\'><option value=\'0\'>&lt;</option><option value=\'1\' selected>&lt;=</option></select></td><td><select class=\'bottomFiles2\'><option value=\'\'>请选择</option><option value=\'0\'>50</option><option value=\'1\'>100</option><option value=\'2\'>200</option><option value=\'3\'>300</option><option value=\'4\'>500</option><option value=\'5\'>1000</option><option value=\'6\'>2000</option><option value=\'7\'>3000</option><option value=\'8\'>5000</option><option value=\'9\'>6000</option><option value=\'10\'>10000</option></select></td><td><input name=\'bottomAmount\' type=\'text\' value=\'\'   style=\'text-align: center;width: 100%;height: 30px\'/></td><td style=\'text-align: center;\'><a  class="layui-btn layui-btn-danger layui-btn-xs ajax" name=\'btnDel\' type=\'button\'>删除</a></td></tr>');                
 form.render('select');//layui 手动渲染元素方法
    });
}

//jquery使用append()追加方法后，追加元素里的事件失效。即click()方法事件失效。如下：

$(function () {

$("a[name=btnDel]").click(function(){

var trNode = $(this).parent().parent();

if(confirm("确定要删除该行吗？")){

trNode.remove();

}

});

//改为用.on()事件即可。删除

   $(function () {
       $("tbody").on('click',"a[name=btnDel]",function(){
           var trNode = $(this).parent().parent();
           if(confirm("确定要删除该行吗？")){
               trNode.remove();
           }
       });
   });

处理jQuery append加入的元素 绑定事件无效的方法

相关推荐

处理jQuery append加入的元素绑定事件无效的方法