Как мне вызвать функцию javascript в дополнение к обратному вызову на стороне сервера?

Question

У меня есть такая разметка:

<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>

При изменении раскрывающегося списка DDL3 выполняется обратный вызов на testFunc. Я хочу добавить дополнительный обработчик событий в этот выпадающий список, который обновит placeholder div. Для этого я пытаюсь использовать jQuery. Я попробовал это в теге head:

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

но jQuery не перехватывает эти события. Я предполагаю, что это потому, что ASP, возможно, переписывает обработчики событий.

Есть ли способ достичь этого?

РЕДАКТИРОВАТЬ: Что визуализируется:

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

Answer 1

Поскольку это элемент управления ASP.NET, вы должны ссылаться на него с помощью ClientID:

Вот тестовый пример:

<asp:UpdatePanel ID="pnl" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="DDL3" runat="server">
            <asp:ListItem Text="Test" Value="1"></asp:ListItem>
            <asp:ListItem Text="Test 2" Value="2"></asp:ListItem>
        </asp:DropDownList>                    
    </ContentTemplate>                
</asp:UpdatePanel>                
<div id="placeholder">I'm here</div>

Существует два способа обработки изменения выбора:

$(function() {
    $("#<%=DDL3.ClientID%>").change(function(e) {
        $("#placeholder").html("Hello world!");
    });
});

Вы также можете использовать этот подход, если предпочитаете:

$(function() {
    $("#<%=DDL3.ClientID%> option").click(function() {
        $("#placeholder").html("Hello world!");
    });
});

Если ни один из вышеперечисленных способов не работает, можно найти другое решение здесь .

Answer 2

Ваш " выпуск " - это <asp:UpdatePanel>.UpdatePanels переписывают свое содержимое при обновлении, поэтому <select>, с которым вы связываетесь, вероятно, не <select>, с которым вы взаимодействуете - даже если они выглядят одинаково.

Вы можете слушатьСобытия Microsoft Ajax - либо endRequest, либо pageLoaded, после чего вы можете выполнить привязку, как и вы:

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

Или использовать jQuery.live или .delegate:

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