javascript - 动态添加类到控件时，单击事件不起作用

Question

我有以下组件:

<asp:button runat="server" ID="testjavascript" Enabled="false" OnClientClick="return false;"/>
<asp:button runat="server" ID="testcodebehind" OnClick="testfunction" />

我有这个 javascript 类函数:

$('.close').on('click', function() {
    alert("it works!");
    return false;
});

我的按钮位于更新面板内，并且它是异步工​​作的。单击时，testcodebehind 启用“close”类并将其添加到 testjavascript 按钮:

testjavascript.Enabled = true;
testjavascript.Attributes.Add("class", "close");

现在这是我的问题，当我点击 testcodebehind 时，它起作用并且 testjavascript 被启用。 testjavasctipt 也获取类“close”(F12 - 检查)，但点击它不会触发 javascript 函数!我知道该函数可以工作，因为如果我更改 testjavascript 按钮并手动添加靠近它的类，那么它就可以工作。

我在线检查(几个小时)并找到了几个链接，其中之一是: Click event doesn't work on dynamically generated elements

许多其他链接基本相同。但我已经.on了!

任何帮助将不胜感激。谢谢!

Answer 1

尝试delegate the events对于动态添加的元素:

$('body').on('click', '.close', function() {
    alert("it works!");
    return false;
});

原因是，当加载文档时，您将事件绑定(bind)到存在的元素。但是，当您通过 AJAX 或 JavaScript 动态添加元素时，最初绑定(bind)事件时它们并不存在。

因此，该委托(delegate)将监听静态父级中发生的任何 DOM 更改，一旦发生某些情况，它会立即再次向所有这些更改触发事件绑定(bind)脚本。

我看到您已经看到了其他链接，但不知道如何实现，所以我添加了代码供您复制和粘贴。