jquery 动态添加的元素 绑定事件click失效

jquery 动态添加的元素 绑定事件click失效,第1张

这就是“为未来元素添加事件”的方法了,

jquery里为未来元素添加事件的原理很简单,既然这个元素是未来的,那么我们可以把事件绑定在已经存在的元素上,然后在发生点击的时候,再来判断所点击的对象,是否为我们要的对象,然后再触发事件。

$("div#id").on("click","button.do",function(){

    //具体的内容

})

上面这段代码解释起来就是,给div#id绑定一个click事件,并且触发事件的对象为button.do时,开始执行具体的内容。

不管button.do是否为已经存在的,还是未来添加的,都能执行。

对于你的问题,同理就能解决,

$("input[type='checkbox']").click

你的这句,把事件绑定到最近的父元素里,不要绑在离“太远”的父元素上,影响代码的执行效率,

很明显你对ASP.NET的生命周期和表单提交机制不了解,这样动态添加的控件显然在点击按钮二次提交页面刷新之后就没有了 两个解决办法: 一:控件加到前台 二:band_ui放到postback判断之外 还有个办法需要很多的自定义代码处理回传的逻辑

动态加入到DOM中的对象无法继承原有的事件,所以无效,举例:

// $.ajax... ajax部分省略

var tr = ""

if(data.length){

    for(var i=0 i<data.length i++){

        tr = '<tr>'

        tr += '<td>' + data.status == 0 ? "正常" : "报警" + '<td>'

        tr += '</tr>'

        $("#table1").find("tbody").append(tr)

    }  

}

// tr的点击事件

$("#table1 tbody").find("tr").click(function(){

    // do something

})

上面的例子中,table1中原有的tr标签有点击事件,而通过ajax获取数据动态创建添加到DOM中的tr标签并没有继承点击事件,点击无任何反应。解决办法有两种:

纯js方法:将tr的点击事件写成函数,然后为动态创建的tr标签添加该函数的onclick事件:

for(var i=0 i<data.length i++){

        tr = '<tr onclick="OnTrClick()">' // 创建时为tr指定click事件

        tr += '<td>' + data.status == 0 ? "正常" : "报警" + '<td>'

        tr += '</tr>'

        $("#table1").find("tbody").append(tr)

}

jquery方法:jquery中可使用live()、on()两个方法来完成类似效果,其原理是利用事件委派机制,需要注意的是jquery 1.9版本已不再支持live()方法。

// tr的点击事件 (jquery 1.9以下)

$("#table1 tbody").find("tr").live("click", function(){

    // do something

});

// tr的点击事件【推荐】 (jquery 1.7以上)

$("#table1 tbody").find("tr").on("click", function(){

    // do something

})


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11960022.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存