除了服务器端回调之外，我如何调用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> 。 UpdatePanel的重写他们的内容，当他们更新，所以<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());
});