Jquery简单的负载（）测试到容器div不起作用答案

【问题标题】：Jquery simple load() test into a container div not workingJquery简单的负载（）测试到容器div不起作用
【发布时间】：2012-02-19 03:03:31
【问题描述】：

我是 jquery 新手，在使用 jquery 的 load() 函数将 html 文档加载到容器 div 时遇到问题。

我正在使用位于同一基本级 html 文件夹中的外部 Web 服务器上的两个 htmls 文件运行此测试。

我在显示 load() 的 click 函数中写了一个警报，以测试浏览器是否正在识别 js 函数，并且警报在 FF 和 Chrome 中都可以正常弹出，但 html 文档永远不会加载。

感谢您提供的任何帮助。希望这只是我错过了一些非常明显的东西。

谢谢！

带有容器 div 的基本 html 文件 (bindtestone.html)：

<!doctype html>
<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<script type="text/javascript">

  $(document).ready(function() {

    $("li#loader").click(function() {
        $("#container").load("bindtesttwo.html").fadeIn("fast");
        alert("this link is working");
    });
  });   

</script>

<style type="text/css">
    #loaderdiv { width:300px; border:1px solid #000;
     position:relative; }

    #container { width:500px; height:400px; border:1px solid #000;
     position:relative; overflow:visible; }

    #dynacontent { width:100px; border:solid 1px #000; 
     position:relative;  }
</style>    

</head>

<body>

<div id="loaderdiv">
  <ul><li id="loader"><a href="">load file</a></li></ul>
</div>

<div id="container">
</div>

</body>
</html>

我尝试使用 jquery (bindtesttwo.html) 加载的第二个 html 文件：

<!doctype html>
<html>
<head>
</head>

<body>

    <div id="dynacontent">
    <a href="">This is a link</a>
    </div>

</body>
</html>

【问题讨论】：

您是否尝试过使用控制台进行调试以查看您是否正在获取数据或错误？
我在发布之前做过，然后又做了一次，建议的更改如下。 FF 和 Chrome 中的控制台不会抛出错误，也不会提醒我任何缺失的元素。
我很确定你在那里的链接会导致你的页面重新加载:) ...li 中的链接是

标签： jquery html load

【解决方案1】：

您的盲测 2 应该只包含代表其中内容的 div...试试看。

去掉<a href>标签

【讨论】：

感谢您的建议 - 我试过了，但 Chrome 中没有加载任何内容。
但是在 FF 中，我只看到了来自 bindtest 2 的内容，然后它就消失了。也许是 CSS 的东西？
请稍等，让我仔细看看
哦，大声笑，您需要在该链接上做一个防止默认设置，或者添加一个井号可能会在“href”部分上起作用……老实说，摆脱链接并触发点击li...链接导致页面重新加载
你太棒了，非常感谢！我知道我遗漏了一些明显的东西。