<div class="main ks-clear"> <div class="left-nav"> <div class="easyui-panel ly_lp" style="padding:5px"> <ul id="treeM" class="easyui-tree" data-options=" url: 'tree_data.js', method: 'get', animate: true, lines: true, onContextMenu: function(e,node){ e.preventDefault(); } "></ul> </div> </div> <div class="right ly_r" id="rightCon"> <img src="images/1.gif" width="766" height="536" usemap="#terminal" /> <img src="images/2.gif" width="766" height="536" usemap="#terminal2" class="ks-hidden" /> </div> </div>
function getByClass(oParent, sClass){ var aResult=[]; var aEle=oParent.getElementsByTagName('*'); for(var i=0; i<aEle.length; i++){ if(aEle[i].className==sClass){ aResult.push(aEle[i]); } } return aResult; }; window.onload=function(){ //切换图片 var oDivT2=document.getElementById('_easyui_tree_2'); var oUlTLines=oDivT2.nextElementSibling || oDivT2.nextSibling; var oLiNan=oUlTLines.children[0]; var aSpanNan=getByClass(oLiNan,'tree-title'); var oLiPu=oUlTLines.children[1]; var aSpanPu=getByClass(oLiPu,'tree-title'); var oDivRC=document.getElementById('rightCon'); var oImgNan=oDivRC.getElementsByTagName('img')[0]; var oImgPu=oDivRC.getElementsByTagName('img')[1]; for(var i=0;i<aSpanPu.length;i++){ aSpanPu[i].onclick=function(){ oImgNan.style.display='none'; oImgPu.style.display='block'; var sTxtPu=this.innerText || this.textContent; window.status=sTxtPu; }; }; for(var j=0;j<aSpanNan.length;j++){ aSpanNan[j].onclick=function(){ oImgPu.style.display='none'; oImgNan.style.display='block'; var sTxtNan=this.innerText || this.textContent; window.status=sTxtNan; }; }; };
我使用 jQuery easyui 的 tree 插件,左侧是结构树,右侧是图片。点击结构树的不同节点,两张图片进行切换显示。我把 js 代码放在了 head 中。
测试时报错:无法获取未定义或 null 引用的属性“nextElementSibling”。说明 oDivT2 没有获取到,_easyui_tree_2 是结构树中一个 div 的 id。偶尔刷新页面不报错,能实现效果。请问该怎么解决?
一楼的方法是可行的,但是他写的有个东西可能误导你了.
$("长辈元素").on("click", "目标元素", function() {});
并不是父辈元素,而是长辈元素.所以这个地方你可以这样写
$(document).on("click", "目标元素", function() {}); 事件的触发有三个阶段 document 往事件触发地点,捕获前进,遇到相同注册事件立即触发执行 到达事件位置,触发事件(如果该处既注册了冒泡事件,也注册了捕获事件,按照注册顺序执行) 事件触发地点往 document 方向,冒泡前进,遇到相同注册事件立即触发
谢谢,我查了一下 jQuery 的 api,确实是查找后代元素。明白了~
我只知道用jq1.9版本以后给动态添加的元素绑定事件的话,得这样写
$("目标元素的父元素").on("click","目标元素",function(){
});
1.9以前的版本
$("父元素").find("目标元素").click(function(){
});
我要点击的节点不是同一级的,所以不能确定它们的父元素。这样就不能用 on 方法了吧?
if(id == null ){?}
这句代码要怎么用呢?请赐教
@zanetti: 你有获取节点ID的地方吗?如果ID==null的话,处理一下,直接return掉。然后页面获取数据也一个道理,填充数据的时候,ID == null的话,continue,或者随便处理一下就好
@临冰听雪丶: var oDivT2=document.getElementById('_easyui_tree_2');
这就是在获取节点啊,现在如果 alert(oDivT2) 弹出的就是 null。return 的话后面的代码就都不执行了。如果我不打开开发人员工具,结构树能加载完,只是没有想要的点击效果。我把 js 放在 </body> 前,报同样的错误。