jq ajax异步刷新后之前绑定的事件失效

最新推荐文章于 2022-09-22 17:07:45 发布

charles·wang

最新推荐文章于 2022-09-22 17:07:45 发布

阅读量360

点赞数

分类专栏： js 文章标签： ajax javascript 事件失效

本文链接：https://blog.csdn.net/qq_38675373/article/details/124713100

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ajax异步刷新后之前绑定的事件失效

页面加载时点击事件正常，其中 <tbody>标签中的内容可以通过一个按钮点击后异步加载 <tbody>中的内容；异步加载后，点击事件失效。

<table width="100%" cellpadding="0" cellspacing="0" class="style-flow cc-style-flow">
	<thead>
		<tr>
			<td width="10%">任务编号</td>
			<td width="10%">任务ID</td>
		</tr>
	</thead>
	<tbody id="flow_data_id" class="flow_data">
		<tr class="flow">
			<td>
				<i class="fold-ico unfold" data="100000"></i> 
				123123
			</td>
			<td> 100000 </td>
		</tr>
	 </tbody>
</table>

$('.fold-ico').click(function(){
	alert($(this).attr('data'));
})

解决方法：

$("#flow_data_id").on('click', '.fold-ico', function (event){
   alert($(this).attr('data'));
})

其中$("#flow_data_id")中选择器flow_data_id必须是在异步加载内容之外；例如：替换成 flow同样失效；可能是flow_data_id选择器是在页面加载时就注册了一个事件，监听fold-ico class点击事件；而flow异步加载时删除元素注册事件可能也随之删除了。