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

Question

在我的网页上，我有一些面板，其中包含各种输入小部件，其中一些是Bootstrap按钮组。这些的基本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>

输入面板通过Knockout模板生成，并根据用户在主菜单树中选择的菜单项显示或隐藏。这是使用jQuery的addClass()和removeClass()添加或删除Bootstrap/AdminLTE中存在的hide类来完成的。在这两种情况下，这个类都被定义为display: none !important。

我有jQuery代码，它在用户提供输入时执行任务。对于按钮，它看起来像这样：

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

这是在应用Knockout数据绑定之后完成的。它过去确实有效，现在对我的其他非按钮组输入仍然有效——然而，在开发的最后一个月左右的某个时候，它停止了工作，我目前正在努力找出原因。

如果在单击处理程序函数中放置console.log()，则单击按钮时不会打印任何内容。然而，当我试图添加点击处理程序时，报告$(".param-widget-buttongroup .btn-group button").length会返回152的计数(即所有面板中的所有按钮(，因此肯定会找到按钮。

我最终确定，如果我在Chrome web控制台中执行$(".param-widget-buttongroup .btn-group button").on("click", function(){ console.log("Button pressed"); })，只有当我连接处理程序时按钮的面板可见时，我才能在点击时看到它。面板不可见的按钮不会在其上设置该处理程序，即使选择器找到的按钮数量仍报告为152。然而，一旦附加了处理程序，我就可以显示一个不同的面板，稍后返回到原始面板，并且在单击时仍然会打印出预期的输出。

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

或者，有没有一种方法可以明确地检查元素当前具有的单击处理程序？我已经尝试检查元素的$(...)[0].onclick值，但无论jQuery处理程序是否成功附加，该值始终为null。

Answer 1

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

实际上，按钮本身并不是一个类"button"，而是一个"btn"类。

你试过下面的吗？

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