jquery 对于新插入的节点 的操作绑定(点击事件,each等)
因为最近项目遇到这个问题,下面给大家带来一篇Jquery对新插入的节点 获取并对这个节点绑定事件失效的解决方法。我觉得挺不错的,大家也可以参考一下:
对于绑定事件来讲:
方法一:使用live
live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。
实现如下:
1
2
3
|
$( '.liLabel' ).live( 'click' , function (){ alert( 'OK' ); }); |
方法二:使用on
可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:
1
2
3
4
5
6
7
|
$( "#ulLabel" ).on( 'click' , '.liLabel' , function (){ alert( 'OK' ) }); 或者: $( "body" ).on( 'click' , '.liLabel' , function (){ alert( 'OK' ) }); |
对于each()事件来讲:
方法一、刚创建完元素的时候,就立刻使用each方法
代码如下:
$('#btn').on("click", function(){
$('#div').append("<input type='text' />");
$("input").each(function(){
//TODO:
});
});
方法二、使用setTimeout方法在页面加载完成一段时间后再使用each方法
代码如下:
setTimeout(function(){
$("input").each(function(){
//TODO:
});
},1000);
是不是新插入的节点 对这个节点绑定事件失效问题解决了,希望这篇随笔能够帮助大家
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步