[英]load part of a page with jquery/ajax/javascript
I have a series of links that will load a section of another page into my main page container #pageCont
. 我有一系列链接,这些链接会将另一页的一部分加载到我的主页容器
#pageCont
。 I am using the script below and it works perfectly, but only on the first link, the 2nd and 3rd links just redirect me to the actual pages. 我正在使用下面的脚本,它可以完美运行,但是仅在第一个链接上,第二个和第三个链接才将我重定向到实际页面。 I am new to jquery and ajax so i don't have any idea how to go on with this code.
我是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>
. 。
Kindly use class instead of same id's like this 请使用class而不是相同的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();
}));
Use class for an "a" tag instead of id then change the "#" selector to ".". 将类用于“ a”标签而不是id,然后将“#”选择器更改为“。”。 It should work like a charm
它应该像魅力一样工作
You have trouble with your selector) Replace id with class. 您的选择器遇到麻烦)用类替换ID。 Like that)
像那样)
$(".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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.