动态加载的元素,当你用预先用筛选器绑定的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>
		<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>
		<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

java UTC时间格式化 时间带T Z (60389)
最近在调用一个国外的网站api,返回的json数据格式的时间如 2018-01-31T14:32:19Z 。时间字符串带T和Z。这时候需要根据业务来确认你是否要...
iphone如何使用imovie编辑竖屏视频 (11368)
iphone自带的iMovie剪辑app很好用,而且功能强大。无论是合拼视频过度、放慢、添加多首音乐自由合辑等。但发现导出的视频都是类似正方形的很小,竖屏的视频...
springmvc接收参数异常application/json not supported (9891)
纲要1、解决:HTTP媒体类型不支持异常,HttpMediaTypeNotSupportedException: Content type 'appli...
如何将idea自带的maven添加到环境变量 (8092)
想要通过命令形式在cmd操作IntelliJ IDEA自带的maven,那么就必须配置idea的maven环境变量。下面以window 10 和 idea 20...
java初探Tess4j识别图片文字 (7335)
想学习下识别图片中的文字,找到了Tess4j图文识别的方式,于是就初步探究下,玩下识别验证码。第一步,下载1、以3.4.2版本为例,下载Tess4j-3.4.2...
java php js AES加密解密相互通用工具类例子 (1087)
有空之余整理了一份java、php和javascript的AES互相通用的加密解密工具类。AES算法加密和解密有几种加密模式,以下例子使用128位密钥长度CBC模式演示。AES属于对称加密算法...
解决Imagick和GS将PDF转成JPG图片异常及例子 (1231)
本想简单的将PDF转JPG,可是网上在线转不太安全,某些PDF阅读器又都要收费,那只好用代码将pdf转成图片,自己动手丰衣足食。在PHP中使用Imagick将PDF转JPG/PNG等图片时遇到...
解决IOS设备浏览器返回或前进时从无法执行某操作 (501)
发现在ios设备浏览器中返回上一个页面是从浏览器缓存中读取的,在跳转到另一个页面前的一些操作,如“加载中”,在另一个页面点击返回时“加载中”状态依然存在,相应js并没...
Ueditor 百度编辑器利用视频插件上传音频 (704)
百度编辑器Ueditor怎么利用视频插件上传音频呢,编辑器的上传视频插件也有mp3等音频格式上传,但是上传后的标签是video,这并不是我们想要的效果,我们想要是视频用video标...
php文件目录列表转成tree状 (487)
文件目录列表如何转成tree状,即格式化文件目录列表,获得具有父子级关系数据后,再转成tree装数据结构。目录列表转父子关系数据/** * 格式化文件目录列表,使得数据具有父...