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

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

javascript php jquery css ajax

Javascript 如何使JS文件应用于通过AJAX jquery引入的内容？,javascript,php,jquery,css,ajax,Javascript,Php,Jquery,Css,Ajax,我之前问过一个关于这段代码的问题，但现在我有另一个问题我遵循AJAX教程（）学习如何防止加载网站的某些部分。你可以在17:50看到他点击链接，而不是整个页面加载，只有一个特定的部分加载这一切对我来说都很好。但是，我有一个init.js文件，我想应用于content/cats.php。尽管init.js包含在header.php中，但当它被拉入时，它并不适用于content/cats.php。如何解决这个问题我试过把 <script src="js/init.js"></

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

我遵循AJAX教程（）学习如何防止加载网站的某些部分。你可以在17:50看到他点击链接，而不是整个页面加载，只有一个特定的部分加载

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

我试过把

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

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>

init.js

$(function () {

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


});

这把小提琴显示了代码应该可以工作：

有一个简单的解决方案，js文件确实会被加载，jQuery选择器将所有元素应用到运行js文件时存在的所有元素，其中不包括AJAX加载的内容
如果调用.on（）时元素不存在，则事件将不会绑定到该元素
如果希望将事件处理程序添加到动态加载的内容，则应使用以下方法：

$(parentElement).on("click", selector, function(event) { //your code });
在您的特定情况下，应使用以下代码：

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

init.js文件中有什么？对不起，请检查我文章的更新版本。我编辑了content/cats.php、style.css，还包括init.js。我还包括了一些应该发生的事情。但是相反，cats.php在通过AJAX加载时没有响应。我标记为已解决，因为我觉得这应该是正确的答案。然而，它仍然不在我这边工作，不知道为什么。不过，我觉得在你的帮助下，我肯定离你更近了。唯一需要做的是确保调用first on（）时父元素存在。在加载时将js包装在js.init中的文档中，并确保父元素存在，您应该没事。否则我恐怕没有足够的信息来帮助你。谢谢。现在开始工作了！你的解决方案确实是关键。只是有一个愚蠢的错误，仍然在支持我现在修复的东西。再次感谢。
Cats say meow <div id="PureTestDiv">PureTestDiv 1</div> <br> <div id="PureTestDiv2">PureTestDiv 2</div>

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

Dogs say woof

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

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

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