Jquery 动态绑定 on 如何使用,上帝视角帮你理解

整合 Javascript
阅读数: 658 2018年12月05日

结构:

image.png

1、动态绑定就是给还未出现的元素绑定事件,不用每次都去执行绑定事件。

2、Jquery 1.7 之前使用 .live() 来实现动态绑定, 1.7 之后使用 .on() 来实现。

3、使用中容易出错的地方:

理解错误,总以为基于 .js_sort_up 去触发绑定。这是对动态绑定原理的不理解。以下是错误代码:

$(".js_sort_up").each(function(index, element) {
	$('.js_sort_up').on('click',function(){
		console.log('11');
		
		var selfDom = $(this).parents("div.js_rule_box");
		var prevDom = selfDom.prev('div.js_rule_box');
		if(prevDom.length < 1){
			layer.msg('已经到顶了');
		}
		var prevClone = prevDom.clone();
		selfDom.after(prevClone);			
	}
);


先理解 .on() 的原理:给动态创建的元素添加绑定事件,其实就是利于了冒泡的原理,利用DOM树中,存在的被创建元素的父亲元素整个DOM来,通过适配的方式,来查找创建元素并绑定事件。

通俗一些:其实是基于父原始来给下面子元素动态绑定,新增的元素也要是这个父元素里面的子元素。这样才能成功。在此次处理过程中父元素不能是新增的,切记

正确JS:基于父元素 document (上帝视角)出发,对他的子元素 .js_sort_up(子民)进行监听。待有新子元素出生,通过Dom树原理(冒泡)反馈到 doucment (上帝) ,然后检查这个子元素是否有 .js_sort_up 来判断是否给你也这个事件。

$(function(){
	//新增规则
	$(".js_add_rule").each(function(index, element) {
		$(this).click(function(){
			var clone = $(this).parent("div").prev('div').clone();
			$(this).parent("div").before(clone);
		});
	});
	
	//动态给 .js_sort_up 增加上移事件
	$(document).on('click', '.js_sort_up', function(){				
		var selfDom = $(this).parents("div.js_rule_box");
		var prevDom = selfDom.prev('div.js_rule_box');
		if(prevDom.length < 1){
			layer.msg('已经到顶了');
		}
		var prevClone = prevDom.clone();
		selfDom.after(prevClone);
		prevDom.remove();
	});
});


参考资料
https://www.feiniaomy.com/post/174.html
phpriji.cn | 网站地图 | 沪ICP备17015433号-1