Question

我有一系列链接，这些链接会将另一页的一部分加载到我的主页容器#pageCont中。我正在使用下面的脚本，它可以完美运行，但是仅在第一个链接上，第二个和第三个链接才将我重定向到实际页面。我是jquery和ajax的新手，所以我不知道如何继续执行此代码。

$("#embed-uri").on("click", (function(e){
    $.ajax({
        url:$(this).attr("href"),
        success: function(response) {
            $("#pageCont").html($(response).find("#target"));
        }
    });
    e.preventDefault();
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id"pageCont" class="main">
</div>
<div class="sidebar">
<li><a id="embed-uri" href="/webpage1/"</a></li>
<li><a id="embed-uri" href="/webpage2/"</a></li>
<li><a id="embed-uri" href="/webpage3/"</a></li>
</div>

。

Answer 1

请使用类而不是相同的ID

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id"pageCont" class="main">
</div>
<div class="sidebar">
<div><a class="embed-uri" href="/webpage1/"</a></div>
<div><a class="embed-uri" href="/webpage2/"</a></div>
<div><a class="embed-uri" href="/webpage3/"</a></div>
</div>

$(".embed-uri").on("click", (function(e){
$.ajax({
url:$(this).attr("href"),
success: function(response) {
$("#pageCont").html($(response).find("#target"));
}
});

e.preventDefault();
}));

Answer 2

将类用于“ a”标签而不是id，然后将“＃”选择器更改为“。”。它应该像魅力一样工作

Answer 3

您的选择器遇到麻烦）用类替换id。像那样）

$(".embed-uri").on("click", (function(e){
$.ajax({
url:$(this).attr("href"),
success: function(response) {
$("#pageCont").html($(response).find("#target"));
}
});

e.preventDefault();
}));





<!-- begin snippet: js hide: false console: true babel: false -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id"pageCont" class="main">
</div>
<div class="sidebar">
<li><a class="embed-uri" href="/webpage1/"</a></li>
<li><a class="embed-uri" href="/webpage2/"</a></li>
<li><a class="embed-uri" href="/webpage3/"</a></li>
</div>

使用jquery / ajax / javascript

3 个答案: