点击时内容未加载到 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(){ });

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

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>