`

动态元素的绑定事件

 
阅读更多

今天遇到一个问题,因业务需求的变化需要动态的加载一些Dom节点,而初始化时的绑定事件对新加载的Dom节点不起作用,后来查询发现::事件的绑定需要给每个元素单独绑定事件,而事件的初始化时只给存在的Dom节点绑定事件了,而新加载的Dom节点是没有绑定事件的。

  

<body>

<div class="">

<p id="p1">p1</p>

<p id="p2">p2</p>

<p id="p3">p3</p>

</div>

</body>

 

 

如下实例重现该问题:

 <script type="text/javascript">

    $(document).ready(function(){

$('p').hover(function(){

         var pContent = $(this).html();   // !!!!!!!!!!!!!! this指Dom元素-----打印是Object #  

                                            <HTMLParagraphElement>     $(this)------jquery对象     

          alert(pContent);

 });

 var addPDom = '<p class="p4">p4</p>';

 $('div').append(addPDom);  // 动态新添加的Dom元素就没有绑定事件

 });

</script>

比较常用的解决办法:见文件【jquery 新建的元素事件绑定问题】

其中,使用在新增加的Dom上添加点击onclick事件:

var radioInitClick=function(){
	var layer = $("#layer_dept_list");
	var ref = $("#dept_uid");
	layer.find("input[type='radio']").on("click",function(){
		var deptUid = $(this).attr("action-uid");
		var deptName = $(this).val();
		setDept(ref,deptName,deptUid);
		hideLayer(layer,ref);
	});
}

//点击上下级
var reSetDept = function(deptPid,nowDeptUid){
	deptShow(dept_list,deptPid,nowDeptUid);
}


var showLayer = function(layer,ref){
	layer.show();
	//layer.alignTo(ref,"tl-tl");
};
var hideLayer = function(layer,ref){
	layer.hide();
	ref.blur();
};
var setDept = function(ref,deptName,deptUid){
	ref.val(deptName);
	ref.attr("action-uid",deptUid);
};
var initLayerEvent = function(layer,ref){
	layer.attr("action-event","ok");
	layer.find(".layer_close").on("click",function(){
		hideLayer(layer,ref);
	});
	radioInitClick();
}
$("#dept_uid").on("focus",function(){
	$(this).blur();
	var layer = $("#layer_dept_list");
	if(layer.attr("action-event") == "none"){
		initLayerEvent(layer,$(this));
	}
	showLayer(layer,$(this));
});

var deptShow=function(dept_list,pid,nowDeptUid){
	
	var tempPid = 0;
	var tempUid = 0;
	var tempNickName = 0;
	var parentDept = "";
	var parentDept = "";
	var nowDept = "";
	var childrenDept = "";
	
	for(index in dept_list){
		tempPid = dept_list[index]['pid'];
		tempUid = dept_list[index]['uid'];
		tempNickName = dept_list[index]['nick_name'];
		//父级
		if(pid != -1  && pid == tempUid){
			parentDept = '<LABEL style="color: #666;" title="'+tempNickName+'">'
					  +		'<A href="javascript:reSetDept('+tempPid+','+tempUid+');" style="font-weight: normal; color:#666 ;padding-right:0px;" class="dept-link" action-uid="'
					  + 		tempUid+'" hidefocus>'+tempNickName+'</A>'
					  + '</LABEL>'
					  + '<span> &nbsp;>> &nbsp;</span>';
		}
		//当前级
		if(tempUid == nowDeptUid){
			nowDept = '<LABEL title="'+tempNickName+'">'
					 +   '<INPUT class="input_checkbox" type="radio" hidefocus value="'+ tempNickName +'" action-uid="'
					 + 		tempUid+'"name="dept-items" />'
					 +    '<span>'+ tempNickName +'</span>';
					 + '</LABEL>';
		}
		//下级
		if(tempPid == nowDeptUid){
			childrenDept = childrenDept
						 +'<LI><LABEL style="color: #666;" title="'+tempNickName+'">'
						 +	'<INPUT class="input_checkbox" type="radio" hidefocus action-uid="'
						 + 			tempUid+'" value="'+tempNickName+'" name="dept-items"/>' 
						 +	'<A href="javascript:reSetDept('+nowDeptUid+','+tempUid +');"  class="dept-link"  hidefocus>'+tempNickName+'</A>'
						 + '</LABEL></LI>';
		}
		
	}
	
	$("#layer_title").html(parentDept);
	$("#layer_title").append(nowDept);
	$("#layer_all_list").html(childrenDept);
	radioInitClick();
};

//初始化pid=-1最上级
if(dept_list != null){
	deptShow(dept_list,-1,sessionUid);
}

 

可以在加载完Dom节点之后再重复初始化已绑定事件:

例如 $('a').on('click',function(){

      //注意:其中,此处使用this指A节点的Dom元素节点,如果在html里面onclick=function(this---window窗口),可以将需要的参数使用 属性的形式放在A节点的属性里,然后在funcction里使用this的Dom元素获取需要的参数

})

 

var showLayer = function(layer,ref){
	layer.show();
	//layer.alignTo(ref,"tl-tl");
};
var hideLayer = function(layer,ref){
	layer.hide();
	ref.blur();
};
var setDept = function(ref,deptName,deptUid){
	ref.val(deptName);
	ref.attr("action-uid",deptUid);
};
var initLayerEvent = function(layer,ref){
	layer.attr("action-event","ok");
	layer.find(".layer_close").on("click",function(){
		hideLayer(layer,ref);
	});
}
$("#dept_uid").on("focus",function(){
	$(this).blur();
	var layer = $("#layer_dept_list");
	if(layer.attr("action-event") == "none"){
		initLayerEvent(layer,$(this));
	}
	showLayer(layer,$(this));
});

var deptShow=function(dept_list,pid,nowDeptUid){
	
	var tempPid = 0;
	var tempUid = 0;
	var tempNickName = 0;
	var parentDept = "";
	var parentDept = "";
	var nowDept = "";
	var childrenDept = "";
	
	for(index in dept_list){
		tempPid = dept_list[index]['pid'];
		tempUid = dept_list[index]['uid'];
		tempNickName = dept_list[index]['nick_name'];
		//父级
		if(pid != -1  && pid == tempUid){
			parentDept = '<LABEL style="color: #666;" title="'+tempNickName+'">'
					  +		'<A href="javascript:void(0);" style="font-weight: normal; color:#666 ;padding-right:0px;" class="dept-link" action-uid="'
					  + 		tempUid+'" action-pid ="'+tempPid+'" hidefocus>'+tempNickName+'</A>'
					  + '</LABEL>'
					  + '<span> &nbsp;>> &nbsp;</span>';
		}
		//当前级
		if(tempUid == nowDeptUid){
			nowDept = '<LABEL title="'+tempNickName+'">'
					 +   '<INPUT class="input_checkbox" type="radio" hidefocus value="'+ tempNickName +'" action-uid="'
					 + 		tempUid+'"name="dept-items" />'
					 +    '<span>'+ tempNickName +'</span>';
					 + '</LABEL>';
		}
		//下级
		if(tempPid == nowDeptUid){
			childrenDept = childrenDept
						 +'<LI><LABEL style="color: #666;" title="'+tempNickName+'">'
						 +	'<INPUT class="input_checkbox" type="radio" hidefocus action-uid="'
						 + 			tempUid+'" value="'+tempNickName+'" name="dept-items"/>' 
						 +	'<A href="javascript:void(0);"  class="dept-link" action-pid ="'+nowDeptUid+'" action-uid ="'+tempUid+'" hidefocus>'+tempNickName+'</A>'
						 + '</LABEL></LI>';
		}
		
	}
	
	$("#layer_title").html(parentDept);
	$("#layer_title").append(nowDept);
	$("#layer_all_list").html(childrenDept);
	
	//初始化上下级链接的绑定事件
	
	$('.dept-link').on('click',function(){
		var deptPid = $(this).attr('action-pid');
		var ownDeptUid = $(this).attr('action-uid');
		deptShow(dept_list,deptPid,ownDeptUid);
	});
	
	$('.input_checkbox').on('click',function(){
		
		var deptUid = $(this).attr("action-uid");
		var deptName = $(this).val();
		var layer = $("#layer_dept_list");
		var ref = $("#dept_uid");
			
		setDept(ref,deptName,deptUid);
		hideLayer(layer,ref);
	});
	
};

//初始化pid=-1最上级
if(dept_list != null){
	deptShow(dept_list,-1,sessionUid);
}

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...

    js实现动态创建的元素绑定事件

    下面小编就为大家带来一篇js实现动态创建的元素绑定事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    动态的绑定事件addEventListener方法的使用

    本文为大家介绍下动态的绑定事件的方法addEventListener的使用示例,不了解的朋友可以参考下

    js 给动态生成的DOM绑定事件

    web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定,这样才能解决问题的哦!

    AngularJS实现给动态生成的元素绑定事件的方法

    本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法。分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在...

    jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: &lt;ul&gt;&lt;/ul&gt; 假设我们要给ul动态添加的绑定click事件形成如下结果 &lt;li name=apple&gt;apple &lt;li name=pear&gt;pear [removed] function test...

    jQuery实现为动态添加的元素绑定事件实例分析

    本文实例讲述了jQuery实现为动态添加的元素绑定事件。分享给大家供大家参考,具体如下: 在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的...

    vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: &lt;input type=text v-model...

    jQuery中对未来的元素绑定事件用bind、live or on

    主要介绍了jQuery中对未来的元素绑定事件用bind、live or on,需要的朋友可以参考下

    JS如何实现动态添加的元素绑定事件

    这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近做的项目要实现一个动态添加动态删除的功能,思考了...

    jQuery动态添加的元素绑定事件处理函数代码

    我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的...

    jQuery动态生成的元素绑定事件操作实例分析

    主要介绍了jQuery动态生成的元素绑定事件操作,结合实例形式分析了jQuery事件绑定的原理及动态生成的元素绑定事件相关操作技巧,需要的朋友可以参考下

    浅谈Jquery为元素绑定事件

    jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。

    WPF实现MVVM的事件绑定

    WPF实现MVVM的事件绑定的两种非常规方式。 参考博客:https://blog.csdn.net/IQQQQU/article/details/86530285 1、重写InvokeCommandAction来扩充返回的参数 2、运用Behavior来实现事件,可以通过两种方式来获取...

    JS动态添加元素及绑定事件造成程序重复执行解决

    前言 本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function ... consol.log('jquery事件绑定') }); 第二种:  document.addEve

    jQuery中dom元素上绑定的事件详解

    审查绑定事件的元素(对着它右键-&gt;审查元素)在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签然后就能看到所有绑定在该元素的事件了,点开后,找到handler,右击鼠标,选择“Show Function

Global site tag (gtag.js) - Google Analytics