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

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

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

请帮帮我

注意：#add_按钮是一个静态按钮（存在于index.php中，不是一个动态div，我尝试了live而不是click，但也不起作用）

这不管用

add.js

如果add.js内容直接放在index.js中，这会起作用吗

---

这并不是因为它们在不同的文件中。这是因为连接

click

事件的代码运行得太快了。通过将

单击
设置放在
就绪
中，可以让它等待“DOM就绪”。当它不在
ready
处理程序中时，它会立即运行。如果该代码位于
#add_按钮
元素上方，则该元素将不存在，并且处理程序也不会连接

您有两个选择：

只需在标记中使用的元素下方放置
script
标记，例如：

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


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

这是

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

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

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

add.js

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

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

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

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

$（“#添加按钮”）。单击（[]）
也可能不起作用，因为有时在某些浏览器中，您无法确定加载了什么和没有加载什么！如果你把它也放在“准备好”里面，你会把它做好的！它工作完美
 哦，我可以在多个文件中定义就绪处理程序吗？就像在我的例子index.js和add.js中一样，非常感谢T.J，我不喜欢内联脚本，我能为每个外部js文件使用ready处理程序吗？在每个文件中添加就绪处理程序时需要采取什么预防措施？还有什么副作用吗？@Praveen：如果你愿意，你可以在每个文件中都有一个
就绪的
。我不知道有什么副作用。我相信操纵者会按照他们被连接的顺序被呼叫。请注意，将
script
标记放在
末尾并不比将它们放在
标题中更“内联”。我同意把它们放在<代码>正文< /代码>中不是一个好主意。还有一个问题，我有一个变量在索引xjvar var NoDEyCalt＝0中定义；我在add.js中定义的click event handler函数中使用了相同的变量，我得到的变量节点计数未定义错误。顺便说一句，在两个文件中定义就绪处理程序后，click event现在工作，但请告诉我如何解决上述注释中的变量问题？我是否应该在index.js中的就绪处理程序之外定义该变量，似乎是由index.js中的ready匿名函数创建的名称空间
// add.js gets its *own* ready handler
$(document).ready(function() {
    $('#add_button').click(function(event){
     alert('hello');
    });
});

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

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

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