将类动态添加到控件时，单击事件不起作用答案

【问题标题】：Click event doesn't work on when dynamically adding classes to controls将类动态添加到控件时，单击事件不起作用
【发布时间】：2016-04-03 22:58:38
【问题描述】：

我有以下组件：

<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 启用并将“关闭”类添加到 testjavascript 按钮：

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

现在这是我的问题，当我点击 testcodebehind 时，它可以工作并且 testjavascript 会启用。 testjavasctipt 也获得类“关闭”（F12 - 检查），但点击它不会触发 javascript 功能！我知道该功能有效，因为如果我更改 testjavascript 按钮并手动添加靠近它的类，那么它就有效。

我在网上查了几个小时，发现了几个链接，其中一个是： Click event doesn't work on dynamically generated elements

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

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

【问题讨论】：

你有on()，但你有没有真正阅读过关于如何将on()与动态生成的元素一起使用的任何答案或文档，因为这根本不是你在做什么?类似于$(document).on('click', '.close', function() {...
In jQuery, how to attach events to dynamic html elements?的可能重复
忘了说了，我也是这样做的，结果一样。

标签： javascript asp.net asynchronous dynamic webforms

【解决方案1】：

尝试delegate the events动态添加元素：

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

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

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

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

【讨论】：

对不起，Praveen，我忘了说，我也这样做了，得到了同样的结果，我完全不知道为什么它不起作用。

【解决方案2】：

你可以使用这样的东西。还要检查类 .close 是否添加到按钮中。

$(document).on('click', '.close', function() {
    console.log("it works");
    return false;
});

您也可以对UpdatePanel 中的控件执行此操作，因为它们不是每次都加载的。

Sys.Application.add_load(function(){
    $(".close").click(function(){
        console.log("Now this should work");
        return false;
    });
});

【讨论】：