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

Question

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

如果我将单击事件处理程序和就绪处理程序放在索引.js中，请单击事件有效（警报弹出窗口）。

请帮助我。

注意：#add_button 是一个静态按钮（存在于索引中.php，不是动态div，我尝试了实时而不是单击，但这也不起作用）。

这行不通

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

索引.js

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

添加.js

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

如果将 add.js 内容直接放入索引中，这有效.js ？

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

Answer 1

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

您有两种选择：

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

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

   然后当浏览器运行add.js时，该元素将存在。script标签甚至可以紧跟在按钮之后，但我通常建议在文件的末尾（例如，就在结束</body>标签之前），YUI的人也是如此。

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

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

Answer 2

将

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

这是一个速记.ready()

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

Answer 3

始终使用 document.ready 来附加事件处理程序。 外部 JS fuiles 与 HTML、CSS 和其他导入的数据同时处理。

Answer 4

索引.js

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

添加.js

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

为什么你的逻辑不起作用？您正在尝试在文档的就绪状态内创建一个 self 函数，该函数在任何地方都不可用，因为它会在文档达到就绪状态后立即执行。

你必须让你的函数定义一个地方，你可以在任何你想要的地方引用！最好的方法是始终将它们声明在顶部，甚至在文档就绪函数中的任何地方使用。

$('#add_button').click([])也可能不起作用，因为有时在某些浏览器中您无法确定已加载的内容和未加载的内容！如果你把它也放在"准备好"里面，你就会做对！它工作完美！