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。我在头标记中尝试了这个：

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

如果上述两项工作均无效，则可以找到另一种解决方案here。

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

除了服务器端回调之外，我如何调用javascript函数？

2 个答案: