Question

我有以下php页面 main.php content.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();
    });
});

main.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

这就是问题因为你正在使用

$(function(){ }

类似于$（document）.ready（）。这只会识别$（document）.ready（）之前加载的内容。

为了让新内容调用jQuery代码，您需要使用

$（document）.on（）命令：

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

Answer 2

这是一个非常常见的问题，遗憾的是这种问题太常见了，之前已经多次回答过。

你必须了解异步。

在init函数中绑定$('#rank').click时，$（'＃rank'）尚不存在。它最初不在您的DOM中。它会在load()函数结束后创建一段时间，这需要一些时间（甚至几毫秒）。

所以$('#rank').click(...没有做任何事情。

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

现在有两种解决方案：

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

$('#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')元素的侦听器。一旦发生，它将执行该功能。它适用于现在和未来的元素。

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

2 个答案: