0

この jQuery コードでは、クリックしたときにコントロール内のテキストを選択しようとしています。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">

        jQuery(document).ready(
            function () {
                jQuery("input[type='text']").click(function () {
                    this.select();
                });
            });  

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox Text="Text 1" ID="txt1" ClientIDMode="Static" runat="server" />
        <asp:Button Text="Submit" ID="btn1" OnClick="btn1_Click" runat="server" />
        <asp:TextBox Text="Text 2" ID="txt2" ClientIDMode="Static" Visible="false" runat="server" />
    </div>
    </form>
</body>
</html>

コードビハインド:

protected void btn1_Click(object sender, EventArgs e)
    {
        txt2.Visible = true;
    }

問題は、ページのコンテンツを UpdatePanel 内に配置すると、jQuery が txt1 で初めて動作することです。ボタンをクリックしても、どのテキストボックスでも機能しません。

    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:TextBox Text="Text 1" ID="txt1" ClientIDMode="Static" runat="server" />
            <asp:Button Text="Submit" ID="btn1" OnClick="btn1_Click" runat="server" />
            <asp:TextBox Text="Text 2" ID="txt2" ClientIDMode="Static" Visible="false" runat="server" />
</ContentTemplate>
    </asp:UpdatePanel>

Chrome コンソールを使用してデバッグしているときに、jQuery が定義されていないことがわかりました - 奇妙な :-( 何が問題なのか教えてください。

お時間をいただきありがとうございます。

編集:あなたの回答に基づいて、これらの解決策に従ってみましたが、どちらもうまくいきました。

イベントで form1 にバインドし、ドキュメントの準備ができたらこれを含めます。 

> jQuery(document).ready(
>       function () {
>           jQuery("#form1").on("click", "input[type='text']", function () {
>               this.select();
>           });
>       });

ドキュメント自体へのイベントのバインド -

jQuery(document).on("click", "input[type='text']" ,function () { this.select(); });

最初のものは、パフォーマンスが高いほど安全だと思われますが、何を提案しますか?

4

2 に答える 2

2

更新パネルのコンテンツが更新されると、要素はイベント バインディングを持たない新しい要素に置き換えられます。

要素自体にイベントをバインドする代わりに、デリゲートを使用する必要があります。更新パネルを囲む要素にバインドして、更新パネルのコンテンツが置き換えられた後にイベントを処理できるようにします。

jQuery 1.4.2 以降の場合:

jQuery("#form1").delegate("input[type='text']", "click", function () {
  this.select();
});

jQuery 1.7 以降の場合:

jQuery("#form1").on("click", "input[type='text']", function () {
  this.select();
});
于 2012-09-28T19:44:36.853 に答える
1

あなたが持っているクリックイベントはajax呼び出しでバインドされていないので、イベントを登録するためにliveまたはを使用する必要があります。またはjqueryメソッドは、またはセレクターの下にある要素が追加されると、イベントが再バインドされるようにします。jquery のバージョンがかなり古いため、1.7.2 にアップグレードする必要がありますonclickliveonDOMliveon

jQuery(document).ready(
      function () {
            jQuery(document).on("click", "input[type='text']", function () {
            this.select();
       });
});
于 2012-09-28T19:45:38.420 に答える