Onclick 上的内容未加载到 div 中（使用 .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(){ });

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

Answer 2

这是我猜的错误！ js 会在第一次点击时自动替换。

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

解决方案如下所示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
    <p>Anything Here will be replaced</p>
  </div>
</div>

<script>
   $("#actionA").on("click", function(){
    $("#tweetcontent").load("https://enable-cors.org/");
  });

  $("#actionB").on("click", function(){
    $("#tweetcontent").load("https://www.html5rocks.com/en/tutorials/cors/");
  });
</script>

在这里运行！对于小提琴去here

 $("#actionA").on("click", function(){
  $("#tweetcontent").load("https://enable-cors.org/");
});

$("#actionB").on("click", function(){
  $("#tweetcontent").load("https://www.html5rocks.com/en/tutorials/cors/");
});

body {
  background: #ffffff;
  padding: 20px;
  font-family: Helvetica;
}
.card-body{
  background: #ddd;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
    <p>Anything Here will be replaced</p>
  </div>
</div>