Question

信息：我正在创建一个包含nav元素中链接的网站。点击这些链接后，我想从中加载内容只有主要的div。当我点击链接时，这一切都很好，网址被正确更新，并且由于某些原因加载了正确的数据，根据我所遵循的所有示例，我将不得不使用pushstate来实现这一点。

问题：当我然后使用后退/前进按钮时，url已正确更新，但未加载数据。（我意识到这部分的代码在这里丢失了）

我尝试使用HTML5 pushState和popstate阅读有关此问题的大量问题，并遵循几个示例，但我无法让它在我的页面上工作。

任何想法我可以尝试或我做错了什么？

＆＃13;

$(document).ready(function(){
	document.getElementById("nav01").innerHTML =
	"<ul>" +
	"<li><a href=' '>Start</a></li>" +
	"<li><a href='#information' class='links' page='information'>Information</a></li>" +
	"<li><a href='#activities' class='links' page='activities'>Activities</a></li>" +
	"</ul>";
});

$(document).ready(function(){
	$(".links").click(function(e){
		$("#main").load($(this).attr("page")+".html")
	});
});

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html"; charset="utf-8" />
		<title></title>
		<meta name="description" content="">
		<link href="css/site.css" rel="stylesheet">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
		<!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
			<script src="script/scripts.js"></script>
        </script>
	</head>
	<body>
		<header id="header"></header>
		<nav id="nav01"></nav>
		<div id="main">
			This is where we load new content
		</div>
		<footer id="footer"></footer>
	</body>	
</html>

＆＃13;

这就是整个事物的目光。 .attr（＆＃34; page＆＃34;））我认为是从锚点＆＃34;页面＆＃34;中取得，或许可以更好地正确使用href，或者在没有主题标签的情况下这样做（见过这方面的一些例子，但也无法使其工作）。我应该添加那个information.html，例如，只有div id =＆＃34; main＆＃34;在它。

＆＃13;

$(document).ready(function(){ 
    //Contains the static header
    	document.getElementById("header").innerHTML =
    	"";

    //Contains the static navigationbar
    	document.getElementById("nav01").innerHTML =
    	"<ul>" +
    	"<li><a href=' '>Start</a></li>" +
    	"<li><a href='#information' class='links' page='information'>Information</a></li>" +
    	"<li><a href='#activities' class='links' page='activities'>Activities</a></li>" +
    	"</ul>";

    //Contains the static footer
    	document.getElementById("footer").innerHTML =
    	"";

    //This is responsible for loading new content
        /* 	$(".links").click(function(e){
    		$("#main").load($(this).attr("page")+".html")
    		
    	}); */
    	$("#nav01").on('click','.links',function(){
    	    $("#main").load($(this).attr("page")+".html")
    	});
    		
    });

＆＃13;

Answer 1

[您的click event]无效，因为这些动态附加elements，因此您需要 event delegation 。也无需再次在click event中包装document.ready。您需要做的就是attach event传播已经存在的元素，如下所示：

$("#nav01").on('click','.links',function(){
     $("#main").load($(this).attr("page")+".html")
});

#nav01已作为html DOM的一部分出现在页面中。所以你可以从那里传播event。否则，请使用document而不是#nav01

中的$(document).on('click','.links',function(){...});

只是一个建议 - 使用data-*属性而不是使attributes无效是很好的。恕我直言，page不是a代码的有效属性。因此，您只需将其替换为data-page，您也可以直接存储data-page="activities.html"或data-page="information.html"并按以下方式使用它：

$("#nav01").on('click','.links',function(){
     $("#main").load($(this).attr("data-page"))
     //Or $("#main").load($(this).data("page")) if you are using html5
});

html5 js部分页面加载到div后台按钮不起作用

1 个答案: