JQuery给动态生成的DOM元素绑定点击事件

最新推荐文章于 2024-08-17 11:12:57 发布

洗来洗麻衣

最新推荐文章于 2024-08-17 11:12:57 发布

阅读量5.6k

点赞数 1

文章标签： dom jquery 点击事件绑定 js

本文链接：https://blog.csdn.net/qj30212/article/details/52383198

版权

最近做项目的时候，使用ajax调用后台数据来动态生成页面内容。然后在给那些内容绑定一个点击事件的时候，发现点击竟然无效了。原因是：ajax有个请求时间，无论是同步还是异步，JQuery进行的绑定都会在页面加载完后立刻进行，而不是等待ajax请求完。也就是说，绑定的元素绑空了。那这个问题怎么解决呢。方法如下：

在动态生成的时候绑定一个函数，并把对象传进去，如：

strhtml = strhtml + "<td>" + "<button class='btn btn-primary' οnclick='editPosition($(this));' data-toggle='modal' data-target='#PlaceModal'>"
    + "<i class='fa fa-edit'></i>编辑" + "</button>" + "</td>";

然后，js里声明那个函数，并接收this对象，如：

function editPosition(obj){
    $("#Posi-actionFlag").val("update");
    $("#Posi-id").val(obj.parent().parent().children("td").eq(0).html());
    $("#Posi-frequence").val(obj.parent().parent().children("td").eq(2).html());
    $("#Posi-frequence2").val("0");
    $("#Posi-name").val(obj.parent().parent().children("td").eq(1).html());
    var del = obj.parent().parent().children("td").eq(3).html();
    if(del == "0"){
        $("#Posi-isdelete").bootstrapSwitch("state", true);
    }else{
        $("#Posi-isdelete").bootstrapSwitch("state", false);
    }
}

这样就可以啦，问题解决