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 事件绑定，因为控件位于更新面板中。初始加载后 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

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

使用引用链接中的一种方法让 JQuery 将事件绑定或取消绑定到刷新后的任何新元素。您还可以将其用作触发器来取消绑定导致图像加载的事件或覆盖它，以便它调用方法来触发回发（如果这是您想要的）。

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

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

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