Loading content into a div using jQuery is deleting part of my content
Question
I am trying to create a website that's split into two interactive frames. If you click on a link on the left hand side, the left hand side reloads with new content, while the right hand side remains unchanged (and doesn't refresh).
If I click on a link at the top of the sidebar just once, it behaves fine. Once I click on the same link twice, though my navigation elements disappear.
This is my sidebar's content code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.get("sidebar-navigation.html", function(data){
$(".sidebar-nav").html(data);
});
/*
Use $.on() to associate a click handler with any link nested under .sidebar-navigation,
even if the links are dynamically added to the page in the future (ie after a
$.get())
*/
$('body').on('click', '.sidebar-nav a', function() {
/*
Get the href for the link being clicked
*/
var href = $(this).attr('href');
/*
Issue a request for the html document
or resource at href and load the contents
directly into .sidebar if successful
*/
$('.sidebar-content').load(href);
/*
Return false to prevent the link's default
navigation behavior
*/
return false;
})
</script>
</head>
<body>
<div class="sidebar-content">
<div class="sidebar-nav">
</div>
<p>
My sidebar content
</p>
</div>
</body>
</html>
2 answers
solution1
0 2019-01-27 01:23:26
your answer is about right, you just need to target a bit better
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.get("sidebar-navigation.html", function(data){
$(".sidebar-nav").html(data);
});
/*
Use $.on() to associate a click handler with any link nested under .sidebar-navigation,
even if the links are dynamically added to the page in the future (ie after a
$.get())
*/
$('body').on('click', '.sidebar-nav a', function() {
/*
Get the href for the link being clicked
*/
var href = $(this).attr('href');
/*
Issue a request for the html document
or resource at href and load the contents
directly into .sidebar if successful
*/
$('#stick-my-stuff-here').load(href);
/*
Return false to prevent the link's default
navigation behavior
*/
return false;
})
</script>
</head>
<body>
<div class="sidebar-content">
<div class="sidebar-nav">
</div>
<p id="stick-my-stuff-here">
My sidebar content
</p>
</div>
</body>
</html>
solution2
0 2019-01-27 01:48:44
I think what ultimately happened was I was calling out for the sidebar navigation to be reloaded when it shouldn't have been on the destination page. Once I removed the sidebar-nav div from the other pages I wanted to display in the sidebar, everything worked out fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.