I need to trigger the 'blur()' event for an asp:ListBox. I am using the jquery plugin chosen for this control. Once the blur event is triggered I am using ajax to call a server side method.
This is my markup for the 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>

```

This is the javascript:
All of the javascript works except for triggering the blur event.

```
 $(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
            });
        });
    });

```

The OnSuccess and OnFailure functions are defined later.
For now, I just want to see the alert that shows I am in the blur function.

This is the code-behind that is called from 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";
    }

```

Can anybody give me some idea why the blur function is not firing?
Thanks.

**UPDATE**

I tried using the class to ID the function but it does not work either:
This is my change:

```
 $(".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
            });
        });

```

I tried it without 'chosen()' and still not success.

**UPDATE**

I tried defining the 'onblur' event in the markup and bound it in Page\_Load but still without luck. This is what I tried:
Markup:

```
 <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 (I commented out the blur function in the document ready function and added this function:

```
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
                        });
    };

```

In the Code-behind in the Page\_load method I added this:

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

Still no luck....

**UPDATE**
It is something about the ListBox that is does not like.
I added the blur event to the Message TextBox it was triggered.
Using this:

```
onblur="ShowMaxMsgLength()"

```

In the message box, the alert was shown when the text box lost focus.

**UPDATE**
It is using the jquery-chosen plugin as the ListBox that is the problem.
Taking the 'class-chosen-select' away and displaying the ListBox as a normal asp:ListBox control, the blur function is triggered.  

Now, I just have to figure out how/why 'chosen' does not like the 'onblur' function...