为什么我不能将新内容加载到div中?

时间:2013-04-02 18:48:47

标签: jquery html hyperlink load

我希望在一个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;
});

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

尝试检查加载文件时是否有错误

<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 doc site

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.

因此,如果使用file:// protocolhttp等加载您的网站,则使用https尝试加载会产生错误。