为什么我不能将新内容加载到 div 中？答案

【问题标题】：Why can't I load new content into a div?为什么我不能将新内容加载到 div 中？
【发布时间】：2013-04-02 18:48:46
【问题描述】：

我想在一个 div 中有一个链接列表，用于将内容加载到第二个 div 中。我已经阅读了我能找到的关于这件事的所有内容……但它似乎不起作用。这是我所拥有的：

<div id="scentwrap" align="center">
        <div id="sounds"><h2>Sounds like you need to celebrate!</h2><div>
        <div id="myList">
            <div id="listtit">
                <br>Try more recipes below!
            </div>
            <div id="list">
                <ul>
                    <li> <a href="scent2.html">Soothing Blend</a></li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li>
                    <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> 
                    <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> 
                    <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> <li>item # </li> 
                </ul>
            </div>
        </div>
        <div id="currentscent">
            <div id="recipe"> 

                <h4>- Celebration Blend -</h4>
                <ul>
                    <li>Diced Ginger </li>
                    <li>Grapefruit Peels </li>
                    <li>Frankincese Oil </li>       
                </ul>
                <p>
                 Lorem ipsum lorem dadsum doodsum lercem vi can ojr <br> ig thn sas vbg 
                 Lorem ipsum lorem dadsum doodsum<br> lercem vi can ojr ig thn sas vbg 
                </p>
            </div>
            <div id="rec">
                <img src="recimg.jpg"/>
            </div>
        </div>
    </div>

Javascript：

$(function() {
$('a[href=scent2.html]').click(function() {
    $('#recipe').load('scent2.html');
   return false;
});

非常感谢任何帮助！

【问题讨论】：

“似乎不起作用”是什么意思？发生了什么，您是否遇到任何错误？
这是重复吗？ stackoverflow.com/questions/4101770/…
对不起，我应该解释一下。该链接将我直接带到 html 页面，而不是在 div 中加载内容
您查看调试控制台是否有错误，或者查看请求是否成功？
当我加载页面时，JS 控制台说，“Uncaught SyntaxError: Unexpected end of input”。当我点击链接时，我会直接进入 html 页面，而不是在 div 中加载内容。

标签： jquery html hyperlink load

【解决方案1】：

您没有关闭 jQuery 文档就绪事件。代码应如下所示：

   $(function() {
     $('a[href="scent2.html"]').click(function() {
       $('#recipe').load('scent2.html'); 
       return false;
     });
   });

【讨论】：

谢谢。我试过这个，我得到了错误：未捕获的错误：语法错误，无法识别的表达式：a[hrscent2.html]
我已更新代码以将 href 包含在引号中 a[href="scent2.html"]

【解决方案2】：

尝试检查加载文件是否出错

<script>
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  </script>

编辑

确保您的通话符合同源政策。来自 Jquery 文档网站

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

因此，如果您的网站正在使用 http 或 https 等加载，则尝试使用 file:// protocol 加载会引发错误。

【讨论】：

我得到了这个.."XMLHttpRequest 无法加载文件：///Volumes/NO%20NAME/DESIGNSITE/scent2.html。Access-Control-Allow-Origin 不允许 Origin null。"
@kayz1 是的，它是 Google Chrome，但 ti 在 Firefox 或 Safari 中似乎也不起作用。
@pollirrata 抱歉，我不知道那是什么。我对 Javascript 很陌生。