Question

我使用$.ajax函数将一些HTML代码加载到div中。但我在<body>中的脚本没有执行，请你帮助我，这对我来说非常重要。

这是我的HTML主页：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Navigation AJAX avec jQuery</title>

<script type="text/javascript" src="js/jquery.js"></script>
  
<script type="text/javascript">
$(document).ready(function() {
	var $contenu_div = $('#content div');
	
	
	$('#nav li a').on('click', function() {
		var url = $(this).attr('href'); 

			$.ajax({
				url: url,
				cache: false,
				success: function(html) {
					$contenu_div.hide().html(html).fadeIn();
				}
			});
				
		return false;
	});
});
</script>
  
</head>
<body>

	<h2>Navigation AJAX with jQuery</h2>

	<div id="menu">
		<ul id="nav">
			<li><a href="pages/page1.html">page 1</a></li>
			<li><a href="pages/page2.html">page 2</a></li>
			<li><a href="pages/page3.html">page 3</a></li>
			<li><a href="pages/page4.html">page 4</a></li>
		</ul>
	</div>

	<div id="content">
		<div>the content of the first page</div>
	</div>
  
  <script src="problem.js"></script>

</body>
</html>

＆＃13;

我简化了代码

ajax导航工作完美但<script src="problem.js"></script>没有执行，问题是什么？

Answer 1

您可以直接将此ajax函数放入document.ready函数中像

$(document).ready(function(){
var url = $(this).attr('href'), $contenu_div = $('#content div');
        $.ajax({
            url: url,
            cache: false,
            success: function(html) {
                $contenu_div.html(html);
            }
        });
  });

它将在加载完整DOM后命中服务器并从服务器提取数据。

Answer 2

试试这样：

我评论过要告诉你发生了什么......

var $contenu_div = $('#content div');
$('#nav li a').on('click', function() { /* click captured */
    var url = $(this).attr('href'); /* set the URL we want to load */
    $contenu_div.hide().load(url, function(){ /* hide element first, then load it */
      $(this).fadeIn() /* this is the callback which will fadeIn() when content loaded */
    });
    return false; /* stop the click */
});

Answer 3

我为你写了一个样本，用于创建完整的ajax页面并且对我来说很好，但我建议你使用像angular，ember这样的spa框架之一。这些框架非常有用

main.html中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
    <h2>Navigation AJAX with jQuery</h2>
    <div id="menu">
        <ul id="nav">
            <li><a href="page.html">page 1</a></li>
            <li><a href="page.html">page 2</a></li>
            <li><a href="page.html">page 3</a></li>
            <li><a href="page.html">page 4</a></li>
        </ul>
    </div>

    <button id="click-me">First Click on page 1, then click me</button>
    <div id="content">
        <div>the content of the first page</div>
    </div>

<script type="text/javascript" src="jquery.1.11.3.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var $contenu_div = $('#content div');
    $('#nav li a').on('click', function() {
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            cache: false,
            success: function(html) {
                $contenu_div.hide().html(html).fadeIn();
            }
        });                
        return false;
    });
    $("#content").on("click", "#click",function(){
        alert("button click");
    })
});
</script>
</body>
</html>

page.html中

<h2>page 2</h2>
<button id="click">Click me</button>

<script type="text/javascript">
    $(document).ready(function() {
        // console.log("page 2 is loaded");
        // your code should be here
        $("#click-me").on("click",function(){
            alert("button clicked on main page");
        })
    });
</script>

在ajax响应中执行脚本

3 个答案: