我在学习ajax数据到元素的时候,发现由ajax添加的数据无法被点击事件响应。请问我该如何解决?

我在学习ajax数据到元素的时候,发现由ajax添加的数据无法被点击事件响应。请问我该如何解决?,第1张

因为你添加的ajax数据在js执行之后,也就是说$('.test').click这个方法在js执行之后没有被绑定在click上面。这个时候需要动态绑定,把事件绑定在js执行完成之前就存在的元素上面,例如下面的例子我绑定在table上面,然后用on()来绑定click,on其实可以接受三个参数,如果第二个是字符串的话,就是动态绑定的元素。

<table id="table">

<tr>

<td>11111</td>

</tr>

</table>

<script>

setTimeout(function() {

$('#table').append('<tr><td class="test" id="12">id12</tr><tr><td class="test" id="13">id13</tr><tr><td class="test" id="14">id14</tr>')

}, 1000)

$('#table').on('click', 'td.test', function() {

var test_id = $(this).attr('id')

console.log(test_id)

})

</script>

ajax生成的未来元素。给未来元素添加事件,可以使用jq的on方法。

或者,document.body.onclick=function(e){

var e=e||window.evetn

if(e.target.tagName=='xxxx') //或者.className=='xxxxx'

}

意思是当点击的元素的标签名或class名为什么什么的时候就怎么怎么的。

事件是在网页加载的时候都绑定好了,动态添加的tr上其实并没有绑定事件,如果想动态绑定的话可以用live来绑定,live方法用法和bind相同。比如想给所有tr动态绑定click事件,$("tr").live("click",function(){/*…………*/}) ,强烈建议你在动态添加tr后给新添加的tr单独绑定一次事件


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

原文地址: https://outofmemory.cn/bake/11672698.html

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

发表评论

登录后才能评论

评论列表(0条)

保存