Javascript HTML：如果元素不可见，则忽略添加OnClick事件

在我的网页上，我有包含各种输入小部件的面板，其中一些是引导按钮组。这些的基本HTML类似于以下内容：

<div class="btn-group btn-group-justified param-widget param-widget-buttongroup">
    <div class="btn-group" role="group">
        <button type="button" class="btn">Option A</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn">Option B</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn">Option C</button>
    </div>
</div>

这是在应用敲除数据绑定后完成的。它确实曾经起作用，对于我的其他非按钮组输入仍然起作用——然而，在开发的最后一个月左右的某个时候，它停止了工作，我目前正在试图找出原因

如果在click handler函数中放置

console.log（）

，则单击按钮时不会打印任何内容。但是，在尝试添加单击处理程序时，报告

$（“.param widget buttongroup.btn group button”）.length

会返回152个计数（即所有面板上的所有按钮），因此肯定会找到这些按钮

我最终确定，如果我在Chrome web控制台中执行

$（“.param widget buttongroup.btn group button”）。在（“click”，function（）{console.log（“button pressed”）；}

上，我只有在连接处理程序时按钮的面板可见的情况下，才会在单击时看到这一点。面板不可见的按钮不会在其上设置该处理程序，即使选择器找到的按钮数仍然报告为152。但是，一旦附加了处理程序，我可以显示一个不同的面板，稍后返回到原始面板，并且在单击时仍然会打印预期的输出

如果项目当时被隐藏，jQuery是否有任何理由决定不附加click处理程序？我使用的任何其他输入（单个按钮、文本框、选择框、离子范围滑块等）都没有这个问题

---

或者，是否有一种方法可以确定检查元素当前有什么单击处理程序？我已尝试检查

$（…）[0]。单击元素的

值，但无论jQuery处理程序是否成功附加，该值始终为空。

您的JS代码设置为选择CSS类

实际上，按钮本身没有类“按钮”，而是“btn”类

你试过以下方法吗

 $(".param-widget-buttongroup .btn-group btn").on("click", function()
{
    // Do some stuff here - send messages to the device I'm controlling, etc.
});

---

使用事件委派，即

$（文档）。在（“单击“，”.param widget buttongroup.btn group button”，function（）{//在此处执行一些操作-向我控制的设备发送消息，等等）我认为当隐藏不应该影响事件附件时，元素不会添加到DOM中，您确定它们是隐藏的吗？意思是它们可能没有添加到文档中是的元素肯定会添加到文档中。这是使用敲除模板完成的（我会将其添加到问题中），但即使尝试添加处理程序太早，我通过Chrome web控制台手动执行也肯定会足够晚。@Satpal-你说得对！你能不能再多给我一点信息，解释一下为什么那个电话会起作用？（最好是以答案的形式，因此我可以接受它作为解决方案）它应该有效<代码>显示：没有

元素仍然是DOM的一部分。它们没有被移除。CSS不能操纵DOM。参见这里的示例（在控制台中1秒钟后），OP选择了类为

.btn group

的元素内部的

按钮，这是正确的。您要做的是选择名为
btn
的元素，该元素在类
.btn组中不存在。如果要选择类
btn
，则应使用
选择器->
.btn
是否为
.btn
？选择器的最后一部分目前只使用
按钮
作为元素类型，而不是使用
.btn
作为类，但我不认为这会有什么不同，因为选择器已经找到了我的所有按钮。不过，我会试试看。编辑：忍者d
 $(".param-widget-buttongroup .btn-group btn").on("click", function()
{
    // Do some stuff here - send messages to the device I'm controlling, etc.
});