附加到页面外的点击事件

Question

我的ASPX页面中有以下按钮 -

 $('#btnHello').click(function () {
   alert('Hi there');
 });

哪个按预期工作并显示警报，但是我想将此事件移动到具有完全相同逻辑的 global.js 文件中。我在ASPX页面顶部引用此文件，但事件未触发。我怎样才能做到这一点？

Answer 1

使用事件委托：

$(<parent_of_btnHello>).on("click", "#btnHello", function () {
    alert('Hi there');
});

..其中<parent_of_btnHello>应该是添加处理程序时加载的元素。例如：

$("body").on("click", "#btnHello", function () {
    alert('Hi there');
});

也可以是$(document)或$("html")或按钮的任何容器，加载来自global.js文件的代码被执行。

您也可以查看this answer。

---

另一种方法是将初始代码放在$(document).ready(function () { ... });：

中

 $(document).ready(function () {
   $('#btnHello').click(function () {
      alert('Hi there');
    });
 });

Answer 2

当您尝试绑定事件时，很可能没有这样的元素。

尝试使用document.ready

包装代码

$(function() {
   $('#btnHello').click(function () {
      alert('Hi there');
   });
})

Answer 3

您最初执行的功能是一个功能：

 $('#btnHello').click(function () {
    alert('Hi there');
 });

您将警报功能连接到元素#btnHello。

但在执行时，#btnHello尚未加载。它还没有存在。没有什么可以搞定的。

您可以通过在最后执行代码来解决这个问题，或者（更可靠地，我认为）推迟执行此代码的执行，直到文档加载完毕为止：

$(function () {
    $('#btnHello').click(function () {
       alert('Hi there');
     });
 });

你会把它放在你的global.js中，但是在页面完全加载之前它不会执行。