javascript - 单击时内容未加载到 Div(w.jQuery)

Question

我整个早上都在盯着这个问题看，我就是看不出我的问题出在哪里。我看过大多数其他“单击时将内容加载到 div”的帖子，所有 jQuery 脚本/div ID 似乎都与我拥有的相同。

基本上，我的页面上有一张卡片，其中有 2 个链接作为标题，“内容 A”和“内容 B”。我想要 card-body当有人在内容 A 和内容 B 之间点击时动态变化。

我正在使用 Django 制作网站，如果这有什么不同的话。

卡片来自 Bootstrap。

这是我的代码:

<div class="card text-center" style="width: 800px;">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link" href="#actionA" style="color:#1DA1F2" id="actionA">Show Content A</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#actionB" style="color:#1DA1F2" id="actionB">Show Content B</a>
      </li>
    </ul>
  </div>
  <div class="card-body" id="tweetcontent">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $("#actionA").on("click", function(){
        $("#tweetcontent").load("top10pos.html");
      });
    </script>
  </div>
</div>

全部top10pos.html里面只有<p>Content A</p> (测试)，并且它与上面的卡片代码的 HTML 文件在同一目录中。

我做错了什么？一切似乎都遵循大多数其他帖子所说的修复方法。任何帮助将不胜感激。谢谢。

Answer 1

我认为在执行此 .load() 时 DOM 可能未完全加载。

尝试像这样包装您的代码:

$(document).ready(function(){ });

让我知道您的结果 - 我会继续考虑其他可能性。