Javascript 附加到页面外部的单击事件

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

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

它按预期工作并显示警报，但是我希望使用完全相同的逻辑将此事件移动到我的global.js文件中。我在我的ASPX页面顶部引用了这个文件，但是事件没有触发。如何实现这一点？

使用事件委派：

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

它也可以是

$（document）

或

$（“html”）

或按钮的任何容器，这些容器在执行

global.js

文件中的代码时加载

你也可以查一下

---

另一种方法是将初始代码放入

$（document）.ready（函数（）{…}）中：

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

尝试用document.ready包装代码

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

从一开始，您执行的是一个函数：

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

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

但在执行时，
#btnHello
尚未加载。它还不存在。所以没有什么东西被连接起来

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

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

您可以将其放在global.js中，但在页面完全加载之前，它不会执行

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

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