jquery动态绑定事件处理一些由于html代码是动态生成绑定事件失败问题

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(762)   2023-03-28 11:29:14
jquery动态绑定事件处理一些由于html代码是动态生成绑定事件失败问题
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>测试</title>
</head>
<body>
<div id="test_div"></div>

<!-- 引入jquery,这里需要改成你们自己的路径 -->
<script type="text/ecmascript" src="resources/common/js/include.js"></script>
<script type="text/javascript">
$(function(){
	var html='<button class="test_btn">动态生成按钮</button>';
	//动态代码添加到div中
	$('#test_div').append(html);
	
	//普通绑定事件方式绑定刚添加的代码中的button点击事件
	 $('.test_btn').click(function(){
		 alert("按钮被点击到了");
	 });
	
	//动态绑定,其实就是将绑定事件交给document托管;格式  $(document).on('事件名','jquery选择器',function(){});
	$(document).on('click','.test_btn',function(){
		alert('动态绑定生效了');
	})
})
</script>	
</body>
</html>
 
标签:
地址:https://www.leftso.com/article/3.html

相关阅读

ckeditor绑定keyup/keydown等事件实现一些功能,比如实时保存$(function(){//1编辑器初始化$('textarea#blog_content').ckeditor();
Spring Boot 2.0 绑定properties属性资源文件 Spring Boot 2.0 读取properties配置文件值 Spring Boot 2.0获取properties配...
HTML 标签中onclick事件中的this并非当前元素。而是window。需要获取当前的元素怎么办呢?以下开始讲解。
在Java编程中,ORM框架mybaties处理@Select注解中的动态sql处理方法
jQuery的$.ajax()使用及API文档,jQuery,ajax,$.ajax()
Jquery cookie插件实现点击获取验证码后60秒内禁止重新获取,可直接拿走用,jquery,验证码获取
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
bootstrap-select ajax动态添加值中遇到的IE兼容问题解决