Question

我有一个简单的aspx页面，它在UpdatePanel中有两个文本框。我还有一个jQuery函数来感知这些文本框中的功能键F2。如果没有UpdatePanel，这个jQuery函数可以很好地工作。但是，使用UpdatePanel时，根本不会执行此功能。

jQuery函数编码如下：

    <script src="Scripts/jquery-2.1.4.min.js"></script>

<script>
    // function which will work for all textbox
    $(function Fun2() {

        // Execute if input type is textbox and 
        // if user performs keydown on this textbox
        $("input[type=text]").keydown(function () {

            // Check if F2 (ASCII 113) is pressed
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '113') {

                // Extract TextBox ID and Text Value
                var currentId = $(this).attr('id');
                var currentVal = $('#' + currentId + '').val();
                $('#HiddenBoxID').val(currentId);

                // alert user with TextBox ID and Text Value
                //alert('Textbox ID is : ' + currentId + ' and Textbox value is : ' + currentVal);

                // Trigger buttons click event
                $("#Button1").trigger('click');
            }                

        });           
    });
</script>

我的UpdatePanel看起来像这样：

<body>
<form id="form1" runat="server">
<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

        <asp:HiddenField ID="HiddenBoxID" runat="server"/>
        <asp:TextBox ID="TextBox1" runat="server" style="top: 103px; left: 701px; position: absolute; height: 22px; width: 128px"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" style="top: 135px; left: 701px; position: absolute; height: 22px; width: 128px; bottom: 363px"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" style="top: 173px; left: 701px; position: absolute; height: 26px; width: 135px" />
        <asp:Button ID="Button2" runat="server" Text="Clear Message" style="top: 207px; left: 701px; position: absolute; height: 26px; width: 135px" />
        <asp:Label ID="MessLine" runat="server" style="top: 253px; left: 701px; position: absolute; height: 19px; width: 182px"></asp:Label>

        </ContentTemplate>
    </asp:UpdatePanel>
</div>
</form>

如何在仍然保留UpdatePanel的情况下让函数执行？

Answer 1

我建议你做两个改变：

只是不要在doc ready回调中添加名称。
由于自动生成的ID恰好位于asp中，因此您可以使用control.clientId。

$(function() {

并将这些行更改为：

 $('#<%=HiddenBoxID.ClientID %>').val(currentId);
 $("#<%=Button1.ClientID %>").trigger('click');

Answer 2

更改您的标记如下

// Adding ClientIDMode attribute so that your Jquery selectors are found.
<asp:HiddenField ID="HiddenBoxID" runat="server" ClientIDMode="Static"/>
<asp:Button ID="Button1" runat="server" Text="Button" ClientIDMode="Static" style="top: 173px; left: 701px; position: absolute; height: 26px; width: 135px" />

并在使用UpdatePanel

时将代码包装在Page_Load函数中

function Page_Load()
{
   // Your jquery code goes here
}

更新面板阻碍了jQuery函数的执行

2 个答案: