关于一些动态创建的节点无法绑定事件的问题

        在我们HTML页面中有时候一些DOM元素节点(例如:一些页面加载的新闻公告列表[如下图])是需要通过AJAX请求接口数据动态创建的,而当我们想在JS中想为这些节点绑定事件(如:click,hover...等)时便会出现无法绑定的情况,使用window.onload方法在页面加载后才执行也不行。

解决办法:

        使用JQ提供的.on().delegate()方法可以解决解决此问题,给动态加载的元素成功绑定上事件,但是在这两种方法的参数中一定得写上我们需要绑定事件的那个元素选择器。如:$("#parent").on("click",".list",function(){ } )  $("#parent").delegate("click",".list",function(){ } )

其中两种方法内的第二个参数 .list 是我们动态加载的那个元素,前面的 #parent 是包裹着这些加载出来的元素的一个父元素。

//.list为新闻里的每一条公告,是我们动态创建的;#parent是一个包裹着里的这一行行公告的一个div。
//一般来说,我们绑定事件的写法都是用下面的第一和第二种写法。但是这种写法是绑定不上的。
$('#parent .list').click(function(){//1.直接使用click(fn)方法绑定不上
    console.log($(this).html());
})
$('#parent .list').on('click',function(){//2.使用on("click",fn)方法还是绑定不上
    console.log($(this).html());
})
$('#parent').on('click','.list',function(){//3.此种写法可以成功绑定
    //使用on("click","...",fn),在on里面增加一个参数(需要绑定的那个节点),同时前面调用.on方法的元素改为该节点的父元素即:$('#parent')
    console.log($(this).html());
})
$('#parent').delegate('click','.list',function(){//4.此种写法可以成功绑定
    //使用delegate("click","...",fn),在delegate里面增加一个参数(需要绑定的那个节点),同时前面调用.delegate方法的元素改为该节点的父元素即:$('#parent')
    console.log($(this).html());
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值