$('#sub').html() 无法加载div嵌套html的内容。

Question

有一个选项卡页面，事件是在选项卡页面中的，选项卡下的加载页面使用的js事件是 外层选项卡中的。点击选项卡事件执行加载有效，加载页中的点击事件就无法加载。<div id="divcss5">
<ul class="nav">
     <li class="nav_current" id="nav1" onMouseOver="javascript:doClick(this)"><a href="http://www.divcss5.com/">选项卡1</a></li>
        <li class="nav_link" id="nav2" onMouseOver="javascript:doClick(this)"><a href="http://www.divcss5.com/">选项卡2</a></li>
        <li class="nav_link" id="nav3" onMouseOver="javascript:doClick(this)"><a href="http://www.divcss5.com/html/">选项卡3</a></li>
        <li class="nav_link" id="nav4" onMouseOver="javascript:doClick(this)"><a href="http://www.divcss5.com/">选项卡4</a></li>
    </ul>
    <div class="nav-down">
    <div class="dis" id="sub1">选项卡1的内容</div>
    <div class="undis" id="sub2">选项卡2的内容</div>
    <div class="undis" id="sub3">选项卡3的内容</div>
    <div class="undis" id="sub4">选项卡4的内容</div>
    </div>
</div>点击选项卡的时候，div加载的页面为：
<div  onclick="javascript:doClick(this)" class="structure01_a">流程内容</div>
对应的加载doClick(this)时间的js代码 ：
       function doClick(o){
 o.className="nav_current";
 var j;
 var id;
 var e;
 for(var i=1;i<=4;i++){ 
   id ="nav"+i;    
   j = document.getElementById(id);
   e = document.getElementById("sub"+i);
   if(id != o.id){
     j.className="nav_link";
     e.style.display = "none";
   }else{
e.style.display = "block";
   }
 }          //点击选项卡时加载的页面。
          if(status=="tab"){
 $.ajax({
                    type:"get"
                    url:"showStduyAction!gettabvalues.action",
                    dataType:"html",
                    success:function(data){  
                        $(e).html(data);  
                    },  
                  error: function(){  
                    alert("加载失败");
     }  
            }); 

 }
       //点击选项卡下面的页面内容链接时加载。就是在选项卡内容页面点击链接的时候，在火狐浏览器下能看到加载返回来的值，但是就是页面不显示，空白。
  if(status=="none") {
 $.ajax({
                    type:"get",  
                    url:"workflowsend.action",
                    dataType:"html",
                    success:function(data){  
                    console.info(data);
                        $(e).html(data);  
                    },  
                  error: function(){  
                    alert("加载失败");
     }  
            }); 

 }
 }

Answer 1

建议用jquery的load函数，省时省力还不容易出错。
比如：$.ajax({
                    type:"get",  
                    url:"workflowsend.action",
                    dataType:"html",
                    success:function(data){  
                    console.info(data);
                        $(e).html(data);  
                    },  
                  error: function(){  
                    alert("加载失败");
                    }  
            }); 
这一堆东西，用一句话就可以搞定：$(e).load("workflowsend.action");

Answer 2

你得看看你是用的什么框架，有的框架是自动嵌套N个div的，你最好是根据框架的介绍来做

Answer 3

这样效果一样，都能后台取值，但是页面就是不现实。刷新不出来。你首先要确定e的值能正确表示，并且是你想要的。如果e没错，并且后台能取到，前端的样式也没有问题，是不会显示不出来的。赞同，以前这么做过，都是可以的，只不过这么做写的不合理的话会有内存泄露的问题最后发现问题所在了，tab页面事件执行的时候div的display 属性值为：block而 点击div里面的连接事件时  div的display 属性值为：none解决方法就是在事件加载完数据后执行一句： $(sub).css("display","block");
不知道为什么会出现这种现象。

Answer 4

这样效果一样，都能后台取值，但是页面就是不现实。刷新不出来。你首先要确定e的值能正确表示，并且是你想要的。如果e没错，并且后台能取到，前端的样式也没有问题，是不会显示不出来的。赞同，以前这么做过，都是可以的，只不过这么做写的不合理的话会有内存泄露的问题最后发现问题所在了，tab页面事件执行的时候div的display 属性值为：block而 点击div里面的连接事件时  div的display 属性值为：none解决方法就是在事件加载完数据后执行一句： $(sub).css("display","block");
不知道为什么会出现这种现象。检查下这个样式中的内容
undis

Answer 5

你的逻辑有问题，没有区分是否点击选项卡下的内容触发的doClick事件，导致所有tab都被隐藏了<div  onclick="javascript:doClick(this)" class="structure01_a">流程内容</div>，点这个，你的o就没有id而且你的e参数也获取有问题，你那个得到的都是最后一个sub4