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

知兮丶青

阅读(1597) 2018-02-12

动态加载的元素，当你用预先用筛选器绑定的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/article/74.html