返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery解决添加元素后不执行原有事件的方法
  • 512
分享到

jQuery解决添加元素后不执行原有事件的方法

2024-04-02 19:04:59 512人浏览 八月长安
摘要

我们先来看下我的错误代码 html: <table border="1" id="best"> <tr> <td>

我们先来看下我的错误代码

html


        <table border="1" id="best">
			<tr>
				<td>
					<button class="change">修改</button>
				</td>				
			</tr>
			<tr>
				<td>
					<button class="del">删除</button>
				</td>				
			</tr>
			<tr class="last"><td><button class="add">添加</button></td></tr>
		</table>

js


$(".add").click(function(){
		var newYuansu = $("<tr><td><button class='del'>删除</button></td></tr>");
		$(".last").before(newYuansu);
})
$(".del").click(function(){
        $(this).parents("tr").remove();
})

而此时使用Jquery新加元素,新元素元素不会执行一部分原有的事件函数

博主是学生,也只是研究了一种方法:


$("#best").on("click",".del",function(){
		$(this).parents("tr").remove();
})

把原本的click事件这样写,就可在新加的元素使用,非常好用~

补充:

一、jquery1.3版本以下的(不包括jquery1.3),是时候更新你的jquery版本了。

因为 无解无解无解无解无解无解

二、如果jquery版本是在1.3-1.8之间的话,js/jq动态添加的元素触发绑定事件的解决方法(不建议用on事件,因为1.6版本以下不支持on事件,会报错)

绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持)。


$(".del").live("click",function(){ ///jquery 1.9(不包括1.9)以下可以

               alert('这里是动态元素添加的事件');

           })

三、推荐使用on

如果jquery版本是在1.9或者更高的话,live委托事件是被移除的,通过on来实现。js/jq动态添加的元素触发绑定事件的解决方法

注意注意:如果页面同时存在低版本的jq(1.3-1.8)和高版本jq(jquery1.9以上)的话,live委托事件会被高版本移除,最后导致虽然有jquery版本是在1.3-1.8之间,使用了live事件,页面会报错。

到此这篇关于jQuery解决添加元素后不执行原有事件的方法的文章就介绍到这了,更多相关jQuery的内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: jQuery解决添加元素后不执行原有事件的方法

本文链接: https://lsjlt.com/news/158007.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作