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>

输入面板是通过敲除模板生成的，根据用户在主菜单树中选择的菜单项来显示或隐藏。这是使用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.
});

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

1 个答案: