jquery动态加载元素点击事件失效

标签: jquery
2018-02-12 阅读(602)

动态加载的元素,当你用预先用筛选器绑定的click点击事件失效,如:$(".btn1").click(function(){});


点击事件实现

jquery实现点击事件事件有以下几种方式将函数绑定到 click 事件

js部分

$(function(){
    //普通点击-触发或将函数绑定到被选元素的点击事件    
    $(".btn1").click(function(){
    	alert("你点击了btn1");
    });
    
    //被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
    $(".btn1").bind("click",function(){
    	alert("你点击了btn1");
    });
    
    //方法在被选元素及子元素上添加一个或多个事件处理程序
    //自jQuery版本1.7起,on()方法是bind()、live()和delegate()方法的新的替代品
    $(".btn1").on("click",function(){
    	alert("你点击了btn1");
    });
});

html部分

<button class="btn1">点击btn1</button>


动态加载元素的点击事件

当使用js动态加载的元素,发现如:$(".btn1").click(function(){});等几种方式已经不好用了,失效了,不起作用了。

//如:动态加载的按钮btn3失效

$(".btn3").click(function(){

alert("你点击了btn3");

});

此时可以将点击事件委托到document。如:$(document).on("click",".btn3",function(){});

js部分

//动态加载btn3按钮
$(".btn2").click(function(){
	$("#box").append("<button class=\"btn3\">点击btn3</button><br/><br/>");
});

//点击事件委托到document
$(document).on("click",".btn3",function(){
	alert("你点击了btn3");
});

html部分

<button class="btn2">点击btn2(动态载btn3按钮)</button><br/><br/>
<div id="box">

</div>


完整示例

<html>
	<head>
		<title>动态加载点击事件失效</title>
		<script type="text/Javascript" src="jquery.min.js"></script>
		<script type="text/Javascript">
			$(function(){
				//普通点击
				$(".btn1").click(function(){
					alert("你点击了btn1");
				});

				//动态加载btn3按钮
				$(".btn2").click(function(){
					$("#box").append("<button class=\"btn3\">点击btn3</button><br/><br/>");
				});
				//点击事件委托到document
				$(document).on("click",".btn3",function(){
					alert("你点击了btn3");
				});
				
			});
		</script>
	</head>
	<body>
		<button class="btn1">点击btn1</button><br/><br/>
		
		<button class="btn2">点击btn2(动态载btn3按钮)</button><br/><br/>
		<div id="box"></div>
	</body>
</html>



原创文章,转载请注明出处:https://www.weizhixi.com/user/index/article/id/74.html

分类:
点击(708) 阅读(602) 举报