阻碍jQuery函数执行的更新面板_Jquery_Asp.net_Updatepanel

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

jquery asp.net

阻碍jQuery函数执行的更新面板,jquery,asp.net,updatepanel,Jquery,Asp.net,Updatepanel,我有一个简单的aspx页面，在UpdatePanel中有两个文本框。我还有一个jQuery函数来检测这些文本框中的函数键F2。如果没有UpdatePanel，这个jQuery函数可以完美地工作。但是，使用UpdatePanel时，根本不会执行此函数 jQuery函数的编码如下： <script src="Scripts/jquery-2.1.4.min.js"></script> <script> // function which w

我有一个简单的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的情况下，如何让函数执行？

我建议您进行两项更改：

只是不要在doc ready回调中输入名称。由于asp中正好有自动生成的ID，所以您可以使用control.clientId。并将这些行更改为：

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

按如下所示更改标记

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

尝试$document.on'keydown'，输入[type=text]，函数{}；添加UpdatePanel时，所有文本框和按钮的id属性都会更改，这会使选择器无法工作。尝试使用类而不是id。@Guruprasad Rao您的建议有效，非常感谢…@Tasos K。您的建议有效，非常感谢。。。

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

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