jQuery .replaceWith（）メソッドがクリック時にリフレッシュする

Question

jQuery .replaceWithメソッドを使用して、ユーザーが投稿に返信またはコメントをキャンセルできるようにしています。返信ボタンは、クリックするとテキストボックスを作成するときに機能します。ただし、キャンセルボタンをクリックすると、ページを再読み込みせずに元のポストに戻る代わりにページが更新されます。キャンセルボタンを正しく機能させるにはどうしたらいいですか？ご協力ありがとうございました！

 <form method="post"> 
      <input type="hidden" name="post_id" value="{{ p.key.id() }}"> 
      <input type="hidden" name="user_id" value="{{ user.key.id() }}"> 
      <input type="button" name="reply" id="{{ p.key.id() }}" value="Reply"> 
     </form> 

     <script> 
      $("#{{ p.key.id() }}").click(function() { 

       var reply = $("<textarea name='reply_content' style='resize: none; width: 550px; height: 100px;'></textarea><br><input type='submit' name='reply' value='Reply'><input type='submit' id='cancel_{{ p.key.id() }}' value='Cancel'>") 

       $("#{{ p.key.id() }}").replaceWith(reply); 

      }); 

      $("#cancel_{{ p.key.id() }}").click(function() { 

       var cancel = $("<input type='button' name='reply' id='{{ p.key.id() }}'' value='Reply'>"); 

       $("#{{ p.key.id() }}").replaceWith(cancel); 

      }); 

     </script> 

Answer 1

編集：これで私の古い情報が更新されました。

新しい回答：

私は、コードの上に見て、起こって物事のカップルがあったことに気づきました。最初は、イベントをオブジェクトに結びつけ、そのreplaceWithで起こっていることであるDOMからDOMを削除するときに発生する委譲の問題でした。あなたはここに委任についての詳細を読むことができます：

https://learn.jquery.com/events/event-delegation/

第二の問題は、あなたのボタンが提出したことです。このため、フォームはSSにPOSTしてリフレッシュしようとしていました。以下のJSフィドルで。私はボタンに変更しましたが、送信が必要な場合は、e.preventDefaultを使用してフォームが送信されないようにすることができます。

第3の問題は、キャンセルボタンのクリック時にテキストエリアと返信ボタンを非表示にしようとしていたことでした。返信ボタンを置き換えたフォーム全体ではなく、ボタンの変更を引き起こしたが、テキストエリアを保持するため、これは機能しませんでした。

jsFiddleでもっとクリーンな方法があると確信していますが、これについては何が起こっているのかを知りたいと思っています。

私が適用した修正は、元の状態（キャンセルボタンを元に戻す）を保存し、ボタンとイベントを修正し、キャンセルボタンを元の状態を使用して再投入するように変更することでした。

編集2：新しいフィドルを添付するのを忘れてしまった！

https://jsfiddle.net/6s03k0eb/5/

OLD回答：

だからここで起こって物事のカップルがあります。まず、以下の 無効なHTMLのIDは、IDのは、数字で始めることはできませんし、最も確実 括弧を含めることはできません

<input type="button" name="reply" id="{{ p.key.id() }}" value="Reply"> 

です。このIDは、サーバーによって移入されている場合、あなたは間違いなく正しいIDとない サーバー側の変数でのjQueryを更新する必要があり ：

誤った

$("#{{ p.key.id() }}") 

正しい

$("#someID") 

あなたのページがリフレッシュを続けている理由は、無効なjQueryセレクタのためにJS エラーが発生しているためです。ボタンが のデフォルトアクションoフォームを提出する。ここで

コードを示すJSのフィドルは、適切なIDと 値取り組んでいる：https://jsfiddle.net/6s03k0eb/

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.