javascript - 单独文件中的 jQuery 脚本不起作用

Question

我有以下 php 页面 main.php 内容.php

main.php

当用户单击链接时，content.php 页面将加载到 main.php 页面的 div 中。加载时的 main.php 包含一个单独的脚本文件，其中包含 content.php 页面的脚本。 当我将其包含在 content.php 中时，该脚本工作正常，但当我将其放在 main.php 的 head 部分的单独文件中时，该脚本无法工作，这是什么原因？

JS文件

$(function(){
    $('#new').click(function(event){
        event.preventDefault();
        $('#content').load('content.php');
    });
    $('#rank').click(function(event){
        alert("This works!!");
        event.preventDefault();
    });
});

ma​​in.php

 <div id="container">
            <div id="header">
            </div>
            <div id="nav">
               <a href="#" id="new">New Page</a>
            </div>
            <div id="content">
    /*** Pages get loaded Here ***/
            </div>
            <div id="footer">
            </div>
        </div>

content.php

<a href="#" id="rank">jQuery Test</a>

Answer 1

这是一个非常常见的问题，不幸的是太常见了，并且之前已经回答过很多次了。

你必须了解异步。

当您在 init 函数中绑定(bind) $('#rank').click 时，$('#rank') 还不存在。它最初并不在您的 DOM 中。稍后，当 load() 函数结束时，它将被创建，这需要一些时间(甚至几毫秒)。

因此 $('#rank').click(... 不会执行任何操作。

然后 $('#rank') 正在创建。

现在有两种解决方案:

1) 等待创建 $('#rank')，然后将点击绑定(bind)到它:

$('#content').load('content.php', function(){
     // this is the callback function. It will be executed after the load() finishes and content.php is fetched.

    $('#rank').click(function(event){
        alert("This works!!");
        event.preventDefault();
    });
})

2) 预测并监听 $('#rank')

的创建

通过使用 $('document').on('click','#rank', function(...)，您可以设置一个等待任何 的监听器$('#rank') 元素被创建。一旦发生，它将执行该函数。它适用于当前和 future 的元素。