1

これをテストするためだけに、簡単なページを作成しました。

私のページにはテキストボックスとボタンがあります。ボタンをクリックすると、サーバー側のボタンクリックイベントにより、テキストボックス内にテキストが書き込まれます。

次に、テキストボックスの入力キー押下を検出するjQuery関数があります。

Enterキーの押下を検出すると、ボタンをクリックします。

マークアップ: 

<asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
<asp:Button ID="btnClick" runat="server" Text="test" onclick="btnClick_Click" />
<script type="text/javascript">
    $('#<%=txtTest.ClientID%>').keypress(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) { //Enter keycode
            $('#<%=btnClick.ClientID%>').click();
        }
    });
</script>

分離コード:

protected void btnClick_Click(object sender, EventArgs e)
{
    txtTest.Text = "btnclick click event";
}

リフレッシュするたびに正常に動作します。

次に、ScriptManager を実装しました。

マークアップ:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
        <asp:Button ID="btnClick" runat="server" Text="test" onclick="btnClick_Click" />
        <script type="text/javascript">
            $('#<%=txtTest.ClientID%>').keypress(function (e) {
                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 13) { //Enter keycode
                    alert('hihi');
                    $('#<%=btnClick.ClientID%>').click();
                }
            });

        </script>
    </ContentTemplate>
</asp:UpdatePanel>

分離コード:

protected void btnClick_Click(object sender, EventArgs e)
{
    txtTest.Text = "btnclick click event";
}

次に、最初の入力でのみ機能し、ナットは2番目の入力では機能しません。

誰もこのような問題に直面したことがありますか?

4

2 に答える 2

0

ここでいくつかのことをします。まず、JSコードを別のファイルに入れて<script>、UpdatePanelからタグを削除します。<head>（ただし、これは、次のスクリプトをタグに直接入れた場合にも機能します）。これは、ClientIDプロパティを使用できないことを意味します-jQueryセレクターでそれを整理します。また、ドキュメントの準備ができて部分的なポストバックでイベントをバインドする必要があります。だからあなたのJSでは...

//define the bind function
function bindEvents(){
    //the selector '[ID$="txtTest"]' will select any element with ID ending
    //txtTest - make sure there's only 1!!

    $('[ID$="txtTest"]').keypress(function (e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 13) { //Enter keycode
                alert('hihi');
                $('[ID$="txtTest"]').click();
            }
    });  
}


//bind on doc ready
$(function(){
    bindEvents();

    //and bind on partial postback too  
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindEvents()); 
});
于 2012-07-26T09:30:53.937 に答える
0

このコードブロックをscriptmanagerタグの外に置くだけで、正常に機能します

 <script type="text/javascript">
                $('#<%=txtTest.ClientID%>').keypress(function (e) {
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 13) { //Enter keycode
                        alert('hihi');
                        $('#<%=btnClick.ClientID%>').click();
                    }
                });

</script>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
...
...

アップデート

キーの押下を処理するためのコードが$（document）.ready内にないのはなぜですか？

$(document).ready(function() {
    $('#<%=txtTest.ClientID%>').keypress(function (e) {
                        var code = (e.keyCode ? e.keyCode : e.which);
                        if (code == 13) { //Enter keycode
                            alert('hihi');
                            $('#<%=btnClick.ClientID%>').click();
                        }
                    });
 });

言及されている問題が類似している次のスレッドを参照してください。しかし、解決策はそれをdocument.Ready内に置く代わりに、RegisterStartupScriptを呼び出すことによって、クリックをバインドするスクリプトが毎回バインドされます。

于 2012-07-26T08:29:35.243 に答える