首页 新闻 会员 周边 捐助

js如何获取动态创建的元素

0
悬赏园豆:10 [已解决问题] 解决于 2017-06-24 19:58
<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>
html

 

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;
    };
  };
};
js

我使用 jQuery easyui 的 tree 插件,左侧是结构树,右侧是图片。点击结构树的不同节点,两张图片进行切换显示。我把 js 代码放在了 head 中。

测试时报错:无法获取未定义或 null 引用的属性“nextElementSibling”。说明 oDivT2 没有获取到,_easyui_tree_2 是结构树中一个 div 的 id。偶尔刷新页面不报错,能实现效果。请问该怎么解决?

zanetti的主页 zanetti | 初学一级 | 园豆:128
提问于:2017-03-27 15:10
< >
分享
最佳答案
0

一楼的方法是可行的,但是他写的有个东西可能误导你了.

$("长辈元素").on("click", "目标元素", function() {});

并不是父辈元素,而是长辈元素.所以这个地方你可以这样写

$(document).on("click", "目标元素", function() {});

事件的触发有三个阶段
document 往事件触发地点,捕获前进,遇到相同注册事件立即触发执行
到达事件位置,触发事件(如果该处既注册了冒泡事件,也注册了捕获事件,按照注册顺序执行)
事件触发地点往 document 方向,冒泡前进,遇到相同注册事件立即触发
收获园豆:10
好来污影后 | 菜鸟二级 |园豆:287 | 2017-04-20 17:38

谢谢,我查了一下 jQuery 的 api,确实是查找后代元素。明白了~

zanetti | 园豆:128 (初学一级) | 2017-06-24 19:57
其他回答(2)
0

我只知道用jq1.9版本以后给动态添加的元素绑定事件的话,得这样写

$("目标元素的父元素").on("click","目标元素",function(){

});

1.9以前的版本

$("父元素").find("目标元素").click(function(){

});

怼_烎 | 园豆:202 (菜鸟二级) | 2017-03-27 15:20

我要点击的节点不是同一级的,所以不能确定它们的父元素。这样就不能用 on 方法了吧?

支持(0) 反对(0) zanetti | 园豆:128 (初学一级) | 2017-03-27 16:26
0

if(id == null ){?}

临冰听雪丶 | 园豆:175 (初学一级) | 2017-03-27 15:37

这句代码要怎么用呢?请赐教

支持(0) 反对(0) zanetti | 园豆:128 (初学一级) | 2017-03-27 16:29

@zanetti: 你有获取节点ID的地方吗?如果ID==null的话,处理一下,直接return掉。然后页面获取数据也一个道理,填充数据的时候,ID == null的话,continue,或者随便处理一下就好

支持(0) 反对(0) 临冰听雪丶 | 园豆:175 (初学一级) | 2017-03-27 16:39

@临冰听雪丶: var oDivT2=document.getElementById('_easyui_tree_2');

这就是在获取节点啊,现在如果 alert(oDivT2) 弹出的就是 null。return 的话后面的代码就都不执行了。如果我不打开开发人员工具,结构树能加载完,只是没有想要的点击效果。我把 js 放在 </body> 前,报同样的错误。

支持(0) 反对(0) zanetti | 园豆:128 (初学一级) | 2017-03-29 15:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册