jquery 模糊事件未触发 asp:ListBox

Question

我需要为 asp:ListBox 触发 'blur()' 事件。我正在使用为此控件选择的 jquery 插件。一旦触发模糊事件，我将使用 ajax 调用服务器端方法。 这是我对 ListBox 的标记：

<asp:Panel ID="pnlTo" runat="server" CssClass="basicRow" ClientIDMode="Static">
        <asp:Label ID="lblTo" runat="server"  CssClass="labelText" Text="To: " 
            ClientIDMode="Static"></asp:Label>        
        <asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple" 
                    data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
        </asp:ListBox>
        <asp:HiddenField ID="hdnRecipientAttr" runat="server" ClientIDMode="Static" />
    </asp:Panel>

这是javascript： 除了触发模糊事件之外，所有的 javascript 都可以工作。

 $(document).ready(function () {

        //Create groups for recipient dropdown list
        $(".chosen-select option[grouping='GlobalGroups']").wrapAll("<optgroup label='Global Groups'>");
        $(".chosen-select option[grouping='PersonalGroups']").wrapAll("<optgroup label='Personal Groups'>");
        $(".chosen-select option[grouping='Individuals']").wrapAll("<optgroup label='Individuals'>");

        //Configure the ListBox using the 'chosen' jquery plugin
        $(".chosen-select").chosen({
            search_contains: true,
            no_results_text: "Sorry, no match!",
            allow_single_deselect: true
        });
        $('.chosen-container').css('width', '600px');

        $(".chosen-single").chosen({
            search_contains: true,
            no_results_text: "Sorry, no match!"
        });

        //set hidden field with selected list
        $(".chosen-select").chosen().change(function (evt) {
            $("#hdnRecipientAttr").val("");
            $(".chosen-select").find("option:selected").each(function () {
                var label = $(this).closest('optgroup').prop('label');
                var currentHdnValue = $("#hdnRecipientAttr").val();

                if (label == "Individuals") {
                    var attrText = "Individuals-" + $(this).prop('value') + ";";
                    $("#hdnRecipientAttr").val(currentHdnValue + attrText);
                }
                else {
                    var attrText = "Group-" + $(this).prop('value') + ";";
                    $("#hdnRecipientAttr").val(currentHdnValue + attrText);
                }
            });
            //remove ending semicolon
            var hdnValue = $("#hdnRecipientAttr").val();
            $("#hdnRecipientAttr").val(hdnValue.slice(0, -1));
        });

        $("#lstBoxTo").blur(function () {
            alert("in onblur function");
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetMaxMsgLength",
                data: '{selectedRecipients: "#hdnRecipientAttr"}',
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                success: OnSuccess,
                failure: OnFailure
            });
        });
    });

OnSuccess 和 OnFailure 函数稍后定义。 目前，我只想查看显示我处于模糊功能中的警报。

这是从 AJAX 调用的代码隐藏：

public static string GetMaxMsgLength(string strRecipientList)
    {
        string tstrMaxMsgLength = string.Empty;
        PagingService.EmailInfo EmailInfo = new PagingService.EmailInfo();
        List<int> tlstIndividualIDs = new List<int>();
        List<int> tlstGroupIDs = new List<int>();
        string[] tstrSelectedList = strRecipientList.Split(';');
        foreach (string recipientID in tstrSelectedList)
        {
            if (recipientID.Contains(INDIVIDUAL_GROUP))
            {
                tlstIndividualIDs.Add(Convert.ToInt32(recipientID.Substring(recipientID.IndexOf('-') + 1)));
            }
            else //it's a groupID
            {
                tlstGroupIDs.Add(Convert.ToInt32(recipientID.Substring(recipientID.IndexOf('-') + 1)));
            }
        }
        EmailInfo.IndividualIDs = tlstIndividualIDs.ToArray();
        EmailInfo.GroupIDs = tlstGroupIDs.ToArray();

        return tstrMaxMsgLength = "32";
    }

谁能告诉我为什么模糊功能没有触发？ 谢谢。

更新

我尝试使用该类来标识函数，但它也不起作用： 这是我的改变：

 $(".chosen-select").chosen().blur(function () {
            alert("in onblur function");
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetMaxMsgLength",
                data: '{selectedRecipients: "#hdnRecipientAttr"}',
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                success: OnSuccess,
                failure: OnFailure
            });
        });

我在没有 'chosen()' 的情况下尝试了它，但仍然没有成功。

更新

我尝试在标记中定义“onblur”事件并将其绑定在 Page_Load 中，但仍然没有运气。这是我尝试过的： 标记：

 <asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple" ClientIDMode="Static" onblur="ShowMaxMsgLength()"
                        data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
            </asp:ListBox>

Javascript（我把文档就绪函数中的blur函数注释掉了，添加了这个函数：

function ShowMaxMsgLength() {
                        alert("in onblur function");
                        $.ajax({
                            type: "POST",
                            url: "Default.aspx/GetMaxMsgLength",
                            data: '{selectedRecipients: "#hdnRecipientAttr"}',
                            contentType: "application/json; charset=utf-8",
                            datatype: "json",
                            success: OnSuccess,
                            failure: OnFailure
                        });
    };

在 Page_load 方法的代码隐藏中我添加了这个：

lstBoxTo.Attributes.Add("onblur", "ShowMaxMsgLength()");

还是没有运气....

更新 这是关于 ListBox 不喜欢的东西。 我将模糊事件添加到它被触发的消息文本框中。 使用这个：

onblur="ShowMaxMsgLength()"

在消息框中，当文本框失去焦点时会显示警报。

更新 问题是使用 jquery-chosen 插件作为 ListBox。 去掉“class-chosen-select”，将 ListBox 显示为普通的 asp:ListBox 控件，就会触发模糊功能。
现在，我只需要弄清楚“选择”如何/为什么不喜欢“onblur”功能......

Answer 1

您忘记在lstBoxTo 上设置ClientIDMode="Static"，因此它不会生成具有您期望的ID 的HTML。在您的 .aspx 代码中，像这样定义控件：

<asp:ListBox ID="lstBoxTo" runat="server" ClientIDMode="Static" SelectionMode="Multiple" data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
</asp:ListBox>

Answer 2

我在之前的项目中使用过 Chosen 库。在所选择的封面下将生成自己的标记并有效地隐藏您的原始列表框，仅使用它来“保持”选择。您可能想尝试捕获 on blur 事件。如果我没记错的话，Chosen 将从原始 DOM 元素中复制原始类...

$('.chosen-select').on('blur', function() { ... });

Answer 3

正如 Dave 提到的，问题在于 id。但是，您也可以选择使用“类”作为选择器。

最后，您还可以考虑在代码中添加事件并在加载时将其绑定到控件。

ddl.Attributes.Add("onblur", "YOUR_EVENT();");

也就是说，我建议在大多数情况下使用类。

Answer 4

我能够使用“.change”事件做我需要做的事情。