Question

I have some markup like this:

<form id="ddlSelections" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="DDL3" EventName="SelectedIndexChanged" />
        </Triggers>
        <ContentTemplate>
            <asp:DropDownList ID="DDL3" OnSelectedIndexChanged="testFunc" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

<div id="placeholder"></div>

When the drop down list DDL3 changes, a callback to testFunc is performed. I want to add an additional event handler to this drop down box that will update placeholder div. For this I am trying to use jQuery. I tried this in the head tag:

$(function () {
       $("#DDL3").click(function () {
           alert("Clicked" + $("#DDL3").val());
       });
});

but jQuery is not catching these events. I am guessing this is because ASP is perhaps over-writing the event handlers.

Is there anyway to achieve this?

EDIT: What gets rendered:

<select id="DDL3" onchange="javascript:setTimeout('__doPostBack(\'DDL3\',\'\')', 0)" name="DDL3">

Answer 1

Your “issue” is the <asp:UpdatePanel>. UpdatePanels rewrite their contents when they update, so the <select> you’re binding to probably isn’t the <select> you’re interacting with — even if they look the same.

You can listen to Microsoft Ajax’ events — either endRequest or pageLoaded — after which you can bind as you were:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
    $('#<%= DDL3.ClientID %>').click(function () {
        alert("Clicked " + $(this).val();
    });
});

Or, use jQuery’s .live or .delegate:

$('#<%= DDL3.ClientID %>').live('click', function () {
    alert("Clicked " + $(this).val());
});