`

动态元素的绑定事件

 
阅读更多

今天遇到一个问题，因业务需求的变化需要动态的加载一些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);
}

 

 

 

 

 

 

 

分享到：
| 实现js对象属性的继承
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    layui动态绑定事件的方法

    在前端开发中，动态绑定事件是一项非常重要的技术，尤其是在处理动态创建的DOM元素时。本文将介绍使用layui框架来实现动态绑定事件的方法，并探讨其中的关键技术点。 首先，我们需要了解动态创建DOM元素后，原有的...

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

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

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

    在JavaScript编程中，动态创建元素并为它们绑定事件是常见的需求。这主要涉及到DOM操作和事件处理程序的绑定。在JavaScript中，有多种方法可以实现动态元素的事件绑定，但传统的方法对于新创建的元素可能不起作用。...

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

    jQuery为我们提供了一种非常方便的方法来为这些动态元素绑定事件。接下来，我们将详细探讨如何使用jQuery为动态添加的HTML元素绑定事件。 首先，需要了解的是，在jQuery中，传统的直接事件绑定方式（如使用`.click...

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

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

    jQuery为动态生成的select元素添加事件的方法

    7. 绑定事件到动态元素：文章最后部分展示了如何为动态生成的select元素绑定事件处理器。通过`$.on()`方法，即使元素是后来添加到页面中的，我们依然可以捕捉到它们的事件。在这个例子中，为ID以`"sl_0"`开头的...

    浅谈Jquery为元素绑定事件

    Jquery在处理动态生成的元素时，如果直接使用bind()方法为这些元素绑定事件，将不会生效。这是因为bind()方法只能对已经存在于文档中的元素进行事件绑定。当元素是后来添加到DOM中时，这些事件监听器并不会自动应用...

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

    为了解决这个问题，jQuery提供了一些机制来为未来元素绑定事件，比如`bind`、`live`、`on`和`.one()`方法。 首先，我们要认识到，`bind`方法是不可以用来绑定未来元素的事件的。这是因为在`bind`方法被调用的时候，...

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

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

    js 判断是否绑定一个事件

    js 判断是否绑定一个事件

    javascript为DOM绑定事件 兼容

    直接为 Element 对象绑定事件是指使用 JavaScript 代码直接将事件处理程序赋值给元素对象的事件属性。例如： ``` var obj = document.getElementById('btn'); obj.onclick = function() { alert('click'); } ``` ...

    WPF纯MVVM事件绑定+事件参数 完美示例

    首先，要实现事件绑定，我们需要引用`System.Windows.Interactivity`命名空间，这是WPF Blend SDK的一部分，提供了`EventTrigger`和`InvokeCommandAction`等类，让我们能够在XAML中绑定事件到ViewModel的命令。...

    jQuery on()方法绑定动态元素的点击事件实例代码浅析

    3. 在jQuery中，直接为动态生成的元素绑定事件时可能会遇到问题，因为这些元素在初始绑定事件时还不存在于DOM中。为了解决这个问题，on()方法使用了事件委托机制，即将事件处理器绑定到一个静态父元素上，然后指定要...

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

    标题《JS动态添加元素及绑定事件造成程序重复执行解决》所涉及的知识点主要有以下几个方面： 1. 动态元素的事件绑定问题：在JavaScript中，当我们通过Ajax或者SPA页面动态添加元素到DOM中时，直接使用常规的事件...

    treeview动态数据绑定

    4. **数据绑定事件**：使用TreeView控件的`DataSourceChanged`事件或`ItemDataBound`事件，可以根据需要进行进一步的定制，比如添加自定义的样式或行为。 5. **实时更新**：当数据源发生变化时，如添加、删除或修改...

    关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下： ...

    JQuery 给元素绑定click事件多次执行的解决方法

    原绑定方法： $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法； 解决办法更改绑定方法为： $("#sdfsd").unbind(...在绑定新click方法前对元素所绑定的click方法解绑

    jQuery页面元素动态添加后绑定事件丢失方法,非 live

    但默认情况下，使用jQuery的事件绑定方法，如`.click()`、`.change()`等，只能为初始化时存在于DOM中的元素绑定事件。如果页面内容是在页面加载完成后动态添加的，那么这些元素将不会拥有之前通过jQuery绑定的事件。...

    微信小程序 动态绑定事件并实现事件修改样式

    在微信小程序中，动态绑定事件和根据事件修改样式是实现用户交互的重要手段。本文将详细介绍如何在微信小程序中实现这一功能，并提供一个具体的实例代码。 首先，动态绑定事件是通过在WXML（微信小程序的结构层）...

Magicbox
Global site tag (gtag.js) - Google Analytics