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

Question

如果我执行以下操作，添加按钮上的单击事件处理程序将不起作用(add.js 中定义的单击事件和 index.js 中存在的就绪事件)。

如果我将点击事件处理程序和就绪处理程序放在 index.js 中，则点击事件有效(弹出警报)。

请帮帮我。

注意:#add_button 是一个静态按钮(存在于 index.php 中，不是动态 div，我尝试使用 live 而不是 click 但这也不起作用)。

这行不通

<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 确实如此。 .

2. 使用另一个 ready add.js 中的处理程序(你可以拥有任意数量):

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