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

原创 2016年08月31日 11:22:50

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

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

strhtml = strhtml + "<td>" + "<button class='btn btn-primary' onclick='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);
    }
}

这样就可以啦,问题解决

JS为循环动态生成的节点添加点击事件

举例代码如下: var a=1;  for(var i=0;i
  • u014805893
  • u014805893
  • 2016年09月01日 20:55
  • 5985

jquery给动态dom绑定事件

如果需要给一个按钮绑定事件,通过jquery中一般是这样实现的。$("#id").click(function(){ console.log("hello world!"); });    ...
  • zhaozjc112
  • zhaozjc112
  • 2016年07月07日 11:24
  • 640

动态生成dom元素时发生的重复绑定事件

重复绑定事件
  • qq_38575056
  • qq_38575056
  • 2017年06月26日 17:57
  • 221

jQuery给动态生成的元素添加事件

有时需要向页面内动态添加元素,其中可能还需要给这些追加的元素绑定事件,这时候采用jquery是很方便的。 1、采用live()方法(该方法与1.4版本后废弃): live()方法可以给所有元素附加...
  • qq_24849765
  • qq_24849765
  • 2016年07月13日 23:49
  • 3022

关于jquery 的绑定事件on 如何绑定动态生成的dom元素

今天遇到个问题,在table里面动态更新数据,然后每一行会绑定相应的点击事件 我原本是想用 可作用于未来元素的on方法,但是实际上还是没有起作用,代码如下: $(".form-table tb...
  • cysear
  • cysear
  • 2017年04月20日 14:56
  • 1651

动态生成的DOM做点击事件无效

最近写项目的时候遇到了这种情况,页面中的html标签都是从后台获取的数据,然后利用JS添加到页面上,当再对生成的标签写点击事件(click)时没有效果。项目时这样的,首先从后台接收到数据然后通过递归动...
  • mm_hello11
  • mm_hello11
  • 2018年01月09日 11:11
  • 51

jquery on 动态绑定点击事件

jQuery on()方法绑定动态元素的点击事件无响应的解决办法 作者:山档子 字体:[增加 减小] 类型:转载 时间:2016-07-07 我要评论 这篇文章主要介绍了jQuery ...
  • zhoulovelian
  • zhoulovelian
  • 2016年07月29日 10:18
  • 274

给动态增加的元素添加事件

今天接触到了一个需要给动态表格添加事件的地方,鼠标滑过左边的表格,将相应的内容显示在右边的div中,试了好久终于出来了,代码如下 给动态元素添加点击事件 .content{ widt...
  • xjhtmxx
  • xjhtmxx
  • 2016年05月19日 20:57
  • 970

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

最近做项目的时候,使用ajax调用后台数据来动态生成页面内容。然后在给那些内容绑定一个点击事件的时候,发现点击竟然无效了。原因是:ajax有个请求时间,无论是同步还是异步,JQuery进行的绑定都会在...
  • qj30212
  • qj30212
  • 2016年08月31日 11:22
  • 981

关于动态生成dom绑定事件失效的原因及解决和live()

在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定...
  • han_ying_ying
  • han_ying_ying
  • 2017年06月25日 14:35
  • 675
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery给动态生成的DOM元素绑定点击事件
举报原因:
原因补充:

(最多只允许输入30个字)