• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

Jquery1.9&2.0及其以上版本中动态元素 ON绑定事件无效的解决方案

jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替。本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数中遇到的一些问题。

$(selector).on(event,childSelector,data,function,map)

各个参数说明如下:

Jquery1.9&2.0及其以上版本中动态元素 ON绑定事件无效的解决方案

按照上面的语法下面的例子是可以实现的

<!DOCTYPE html>
<html>
	<head>
		<scriptsrc="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
			</script>
			<script>
				$(document).ready(function() {
					$("p").on("click", function() {
						alert("The paragraph was clicked.");
					});
				});
			</script>
	</head>

	<body>
		<p>Click this paragraph.</p>
	</body>
</html>

但是如果要绑定的on方法是动态加载出来的元素,那么这样使用就是没有用的。看下面的例子:

<!DOCTYPE html>
<html>
	<head>
		<scriptsrc="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
			</script>
			<script>
				$(document).ready(function() {
					$("#div1").click(function() {
						$("<divclass='test'>test</div>").appendTo($("#div1"));
					});
					$(".test").on("click", function() {
						$(".test").css("background-color", "pink");
					});
					$("#div2").bind("click", function() {
						$(this).css("background-color", "pink");
					});
				});
			</script>
	</head>

	<body>
		<h4>This example demonstrates how to achieve the same effect using on() and bind().</h4>
			<div id="div1" style="border:1px solid black;">This is some text.
				<p>Click to set background color using the <b>on() method</b>.</p>
			</div><br>
			<div id="div2" style="border:1px solid black;">This is some text.
				<p>Click to set background color using the <b>bind() method</b>.</p>
			</div>
	</body>

</html>

上面例子中.test元素是动态加载的,但是给它绑定click方法的时候,明明使用了

$(".test").css("background-color","pink");

将背景色设为pink,但是没有起作用,什么原因呢,原因就在于.test是动态加载的元素,而使用上面的方法不能绑定动态加载元素的事件,修正的方法为使用下面的代码代替:

<!DOCTYPE html>
<html>
	<head>
		<scriptsrc="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
			</script>
			<script>
				$(document).ready(function() {
					$("#div1").click(function() {
						$("<divclass='test'>test</div>").appendTo($("#div1"));
					});
					$(document).on("click", ".test", function() { //修改成这样的写法
						$(".test").css("background-color", "pink");
					});
					$("#div2").bind("click", function() {
						$(this).css("background-color", "pink");
					});
				});
			</script>
	</head>

	<body>
		<h4>This example demonstrates how to achieve the same effect using on() and bind().</h4>
		<div id="div1" style="border:1px solid black;">This is some text.
			<p>Click to set background color using the <b>on() method</b>.</p>
		</div><br>
		<div id="div2" style="border:1px solid black;">This is some text.
			<p>Click to set background color using the <b>bind() method</b>.</p>
		</div>
	</body>

</html>

究其原因就在于使用$(document)意义就在于使元素加载完后才执行方法,所以当为jQuery动态加载的元素绑定on方法的时候,使用$(document)设置代码脚本在DOM元素加载完成后开始执行。之前一个移动站项目中遇到了这个问题,动态添加选项卡并操作选项卡,就是用文中的$(document).on()绑定来解决的,想起来记忆犹新,重新温习下;


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Jquery1.9&2.0及其以上版本中动态元素 ON绑定事件无效的解决方案
喜欢 (1)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址