Question

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

我按照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/

Answer 1

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

如果在调用.on（）时元素不存在，则事件不会绑定到它。

如果您希望向动态加载的内容添加事件处理程序，则应使用以下内容：

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

在您的具体情况下，以下代码应该是功能性的：

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

如何使JS文件适用于通过AJAX jquery引入的内容？

1 个答案: