如何使JS文件应用于通过AJAX jquery引入的内容 - How to make JS file apply to content brought in through AJAX jquery?

我之前问了一个关于这段代码的问题，但现在我有另一个问题。

我跟随了一个AJAX教程(https://www.youtube.com/watch?v=WwngGtboldU)来学习如何防止网站的某些部分加载。你可以看到，在17:50，他点击了链接，而不是整个页面加载，只有一个特定的部分加载。

这对我来说都很有效。但是，我有一个init.js文件，我想应用到content/cats.php。尽管init.js包含在header.php中，但当它被拉入时，它并不应用于content/cats.php。如何解决这个问题?

我试过把

 <script src="js/init.js"></script>

在cats.php开头和content/cats.php开头，但这不起作用。

我正在使用XAMPP。

我代码:

style.css

body{
    background-color: aqua;
}
ul#nav {
    list-style:none;
    padding:0;
    margin: 0 0 10px 0;
}
ul#nav li {
    display:inline;
    margin-right:10px;
}
#PureTestDiv {
    background-color:red;
    width:400px;
    height:200px;
}
#PureTestDiv2 {
    background-color:blue;
    width:400px;
    height:200px;
    display:none;
}

header。php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>History API</title>
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/init.js"></script>  
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>

<body>
    <nav id="main">
        <ul>
            <li><a href="cats.php">Cats</a></li>
            <li><a href="dogs.php">Dogs</a></li>
        </ul>
    </nav>

footer。php

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                var nav, content, fetchAndInsert;
                nav = $('nav#main');
                content = $('section#content');

                //Fetches and inserts content into the container
                fetchAndInsert = function(href) {
                    $.ajax({
                        url: 'http://localhost/WebsiteFolder/content/' + href.split('/').pop(),
                        method: 'GET',
                        cache: false,
                        success: function(data){
                            content.html(data);
                        }                    
                    });
                } 

                //User goes back/forward 
                $(window).on('popstate', function() {
                    fetchAndInsert(location.pathname);
                });

                nav.find('a').on('click', function(e) {
                    var href = $(this).attr('href');
                    //Manipulate history
                    history.pushState(null, null, href);
                    //Fetch and insert content
                    fetchAndInsert(href);

                    e.preventDefault();            
                });
            });
        </script>
    </body>
</html>

cats.php

<?php
require 'views/header.php';
?>
<section id="content">
    <?php require 'content/cats.php'; ?>
</section>
<?php
require 'views/footer.php';
?>

内容/cats.php

Cats say meow
<div id="PureTestDiv">PureTestDiv 1</div>
<br>
<div id="PureTestDiv2">PureTestDiv 2</div>

dogs.php

<?php
require 'views/header.php';
?>
<section id="content">
    <?php require 'content/dogs.php'; ?>
</section>
<?php
require 'views/footer.php';
?>

内容/dogs.php

Dogs say woof

init.js

$(function () {
    $('#PureTestDiv').click(function () {  
        $('#PureTestDiv2').fadeIn();
    });

});

这段代码显示代码应该可以工作:http://jsfiddle.net/mgswrv55/

有一个简单的解决方案，js文件被加载，jQuery选择器应用于所有元素到js文件运行时存在的所有元素，其中不包括AJAX加载的内容。

当.on()被调用时，如果一个元素不存在，事件将不会绑定到它。

如果您希望为动态加载的内容添加事件处理程序，您应该使用以下命令:

$(parentElement).on("click", selector, function(event) { 
    //your code
});

在您的特定情况下，下面的代码应该起作用:

$(document).on("click", '#PureTestDiv', function(event) { 
    //do stuff
});