загрузить часть страницы с помощью jquery / ajax / javascript

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

Используйте класс для тега "a" вместо id, затем измените селектор "#" на ".". Это должно работать как шарм

Answer 2

У вас проблемы с вашим селектором) Замените 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>

Answer 3

Пожалуйста, используйте класс вместо того же идентификатора, как это

<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();
}));