今天遇到一个问题,因业务需求的变化需要动态的加载一些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> >> </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> >> </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中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...
下面小编就为大家带来一篇js实现动态创建的元素绑定事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文为大家介绍下动态的绑定事件的方法addEventListener的使用示例,不了解的朋友可以参考下
web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定,这样才能解决问题的哦!
本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法。分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在...
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <ul></ul> 假设我们要给ul动态添加的绑定click事件形成如下结果 <li name=apple>apple <li name=pear>pear [removed] function test...
本文实例讲述了jQuery实现为动态添加的元素绑定事件。分享给大家供大家参考,具体如下: 在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的...
用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model...
主要介绍了jQuery中对未来的元素绑定事件用bind、live or on,需要的朋友可以参考下
这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近做的项目要实现一个动态添加动态删除的功能,思考了...
我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的...
主要介绍了jQuery动态生成的元素绑定事件操作,结合实例形式分析了jQuery事件绑定的原理及动态生成的元素绑定事件相关操作技巧,需要的朋友可以参考下
jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。
WPF实现MVVM的事件绑定的两种非常规方式。 参考博客:https://blog.csdn.net/IQQQQU/article/details/86530285 1、重写InvokeCommandAction来扩充返回的参数 2、运用Behavior来实现事件,可以通过两种方式来获取...
前言 本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function ... consol.log('jquery事件绑定') }); 第二种: document.addEve
审查绑定事件的元素(对着它右键->审查元素)在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签然后就能看到所有绑定在该元素的事件了,点开后,找到handler,右击鼠标,选择“Show Function