單擊時內容未加載到Div中（帶有jQuery）

Question

我整個上午都在盯着這個問題，但我看不出我的問題在哪里。 我看過其他大多數“單擊時將內容加載到div中”的帖子，所有jQuery腳本/ div ID似乎與我所擁有的相同。

本質上，我的頁面上有一張卡片，上面有2個鏈接作為標題：“內容A”和“內容B”。 我希望當有人在內容A和內容B之間單擊時， card-body會動態變化。

如果有任何區別，我將使用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>

在這里運行！ 對於小提琴去這里

  $("#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>