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

Question

如果我执行以下操作,则添加按钮上的click事件处理程序不起作用(在add.js中定义的click事件和index.js中存在ready事件).

如果我在index.js中放置了单击事件处理程序和就绪处理程序,请单击事件工作(警报弹出窗口).

请帮我.

注意:#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标签甚至可以立即按钮后,但我通常会建议文件(例如,就在关闭的结束</body>标记),因为实际上做YUI乡亲.

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

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