javascript - CheckBoxList - onclick() JS 函数如何检测 CheckBox 外部的点击(HTML 输入)

Question

我正在显示CheckBoxList中任何项目的单击加载图像。 .我正在使用javascript onclick方法。

CheckBoxList控件

<asp:CheckBoxList ID="ckBLBusinessUnits" onclick="loader(this.id);" runat="server" AutoPostBack="True" Visible="false" OnSelectedIndexChanged="ckBLBusinessUnits_SelectedIndexChanged"></asp:CheckBoxList>

我被迫使用JS onclick而不是 jQuery 事件绑定(bind)，因为控件位于 updatepanel 内部。 jQuery 函数在初始加载后不会触发。如果我添加替代 .ie 以使用 Sys.Application.add_load(loader);那么首先执行服务器端代码，然后执行 JS 函数。这对我的情况没有帮助。

JS函数

function loader(controlID) {
    if (controlID == "ckBLBusinessUnits")
    {
        if (($('#ckBLBusinessUnits :checkbox:checked').length) >= 5)
        {
            alert("Maximum 5 BUs can be selected.");
            modal = document.getElementById('loadingImage');
            modal.style.display = "block";
        }
    }
    if (controlID == "selectSegment") {
        modal = document.getElementById('loadingImage');
        modal.style.display = "block";
    }
}

现在的问题是，如果我在复选框之外单击一点，则会触发 JS 方法，这意味着将显示加载图像。同时，没有发生回发，因此图像无法隐藏(在 C# selectSegment_SelectedIndexChanged 中)。

如何处理复选框之外的点击？

渲染的 HTML

<table id="ckBLBusinessUnits" onclick="loader(this.id);">
    <tbody><tr>
        <td><input id="ckBLBusinessUnits_0" type="checkbox" name="ckBLBusinessUnits$0" checked="checked" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$0\',\'\')', 0)" value="BU 1"><label for="ckBLBusinessUnits_0">BU 1</label></td>
    </tr><tr>
        <td><input id="ckBLBusinessUnits_1" type="checkbox" name="ckBLBusinessUnits$1" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$1\',\'\')', 0)" value="BU 2"><label for="ckBLBusinessUnits_1">BU 2</label></td>
    </tr><tr>
        <td><input id="ckBLBusinessUnits_2" type="checkbox" name="ckBLBusinessUnits$2" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$2\',\'\')', 0)" value="BU 3"><label for="ckBLBusinessUnits_2">BU 3</label></td>
    </tr><tr>
        <td><input id="ckBLBusinessUnits_3" type="checkbox" name="ckBLBusinessUnits$3" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$3\',\'\')', 0)" value="BU 4"><label for="ckBLBusinessUnits_3">BU 4</label></td>
    </tr>
</tbody></table>

Answer 1

您可以trigger JavaScript events to fire Ajax 面板刷新后。

使用引用链接中的方法之一让 JQuery 将事件绑定(bind)或取消绑定(bind)到刷新中的任何新元素。您还可以使用它作为触发器来取消绑定(bind)，或者取消绑定(bind)导致图像加载的事件，或者覆盖它，以便它调用一个方法来触发回发(如果您愿意的话)。

在您的代码中，onclick 事件在复选框的父表上设置:

<table id="ckBLBusinessUnits" onclick="loader(this.id);">

这就是当您单击复选框外部时触发事件的原因。