Question

我尝试使用jQuery和Ajax加载另一个文件中的div。我可以加载孔文件，我可以在该文件中加载带有文本的div，但我不能单独加载一个简单的div。为什么？

的index.html：

$(function(){
   $("#linkajax").click(function(e){
      e.preventDefault();
      $("#target").load("extern.html #red");   
   });
})

这有效：

$("#target").load("extern.html");
$("#target").load("extern.html #text1");

这不起作用：

$("#target").load("extern.html #red");

extern.html：

<div id="text1"> text </div>
<div id="red"> </div>

#text1 {
    position: absolute;
    top:200px; left:200px;
}

#red {
    position: absolute;
    top:50px; left:50px;
    width:100px; height:100px;
    background:red;
}

这是extern.html：http://jsfiddle.net/RWLeB/

Answer 1

红色div应该包含一些内容。但是，CSS应放在index.html文件中。外部文件中的CSS无法应用，因为您只加载外部页面的一部分（#red）。

Answer 2

如果以下代码有效..

$("#target").load("extern.html #text1");

然后#red也应该工作

$("#target").load("extern.html #red");

这会将div加载到你的目标中，因为你没有任何数据你看不到任何东西

#red css的小变化并检查

#red {
    position: absolute;
    top:50px; left:50px;
    width:100px; height:100px;
    background-color:red;
}

希望有所帮助......

Jquery Ajax在文件中加载div

2 个答案: