单击事件处理程序和在不同的js文件中定义的就绪处理程序 - 不工作

Question

如果我执行以下操作，则单击“添加”按钮上的单击事件处理程序不起作用（在add.js中定义单击事件并且index.js中存在ready事件）。

如果我在index.js中放置了click事件处理程序和ready处理程序，请单击event works（警告弹出窗口）。

请帮帮我。

注意：#add_button是一个静态按钮（存在于index.php中，不是动态div，我试过直播而不是点击但是这也不起作用）。

这不起作用

<script src="js/index.js" type="text/javascript"></script>
<script src="js/add.js" type="text/javascript"></script>

index.js

$(document).ready(function() {
//code
});

add.js

$('#add_button').click(function(event){
 alert('hello');
});

如果将add.js内容直接放入index.js，这是否有效？

$(document).ready(function() {
//code
$('#add_button').click(function(event){
 alert('hello');
});
});

Answer 1

这不是因为他们在不同的文件中。这是因为连接click事件的代码运行得太快了。通过将click设置放在ready中，您可以等到“DOM就绪”。当ready处理程序中的不时，它会立即运行。如果该代码高于#add_button元素，则该元素将不存在，并且不会连接处理程序。

您有两种选择：

1. 只需将script标记add.js放在标记中使用的元素下方，例如：

   <input type="button" id="add_button" value="Add">
   <!-- ... -->
   <script src="add.js"></script>
   

   然后当浏览器运行add.js时，该元素将存在。 script代码could even be immediately after the button，但我通常会建议文件的结尾（例如，在结束</body>标记之前），YUI folks确实如此。< / p>

2. 在ready中使用另一个add.js处理程序（您可以拥有任意数量的处理程序）：

   // add.js gets its *own* ready handler
   $(document).ready(function() {
       $('#add_button').click(function(event){
        alert('hello');
       });
   });
   

Answer 2

将处理程序代码包含在.ready add.js中。这样，在确实将处理程序附加到它之前，您确定DOM已准备好并且按钮存在。

此处a shorthand .ready()

$(function() {
    $('#add_button').click(function(event){
       alert('hello');
    });
});

Answer 3

始终使用document.ready附加事件处理程序。外部js fuiles与html，css和其他导入数据同时处理。

Answer 4

<强> index.js

function myClickEvent(event) {
 alert('hello');
}

<强> add.js

$(document).ready(function() {
$('#add_button').click(function(e){
      myClickEvent(e);
    });
    });

为什么你的逻辑不起作用？ 您正试图在文档的就绪状态中创建一个自身功能，该状态在任何地方都不可用，因为它会在文档到达就绪状态时立即执行。

您必须让您的功能定义在您可以随时引用的地方！最好的方法是始终将它们声明在顶部，并在文档就绪功能内部的任何地方使用。

$('#add_button').click([])也可能无法正常工作，因为有些浏览器有时无法确定已加载的内容，而不是什么！如果你把它保持在“准备好”内，你就会把它弄好！它完美无缺！