JQueryフォームのサブミットがAJAXで機能しないため、Railsはindex.html.erbを不可解に再レンダリングします

Question

jquery/ajax htmlの更新フォームに奇妙な問題があります。

私のアプリは、Railsコントローラを使用する単一ページのTODOアプリケーションですが、すべてのDOMの変更はJquery/Ajaxを通じて行われます。 TODOがJavascriptを介してページにレンダリングされた後、各TODO用の編集ボタンがあります。

編集ボタンをクリックすると、更新フォームがDOMに追加されるAPIリクエストが行われます。そのフォームから更新ボタンは、それがjQueryので、いくつかの未知の理由のRailsのために認識されないクリックされたときに、

しかし、Index.html.erbページのたびに再レンダリングします。私はセレクタのための10種類のソリューションを試して何も動作しません。

DOMに編集フォームを追加選択方法はここにある：

$(document).on("click", ".ugh3", function(e) { 
     e.preventDefault() 
    let id = e.target.id 
    let event = e 
    $.ajax({ 
    type: "GET", 
    url: `/todos/${id}`, 
    success: function(response) { 
     let newTodo = new Todo(response) 
     let todoHtml = newTodo.formatEdit() 
     $('.todo-list').append(todoHtml) 
    } 
    }) 
}) 

上記の呼び出しは完璧に動作します。しかし、私がフォームを送信しようとすると、それを認識してIndex.html.erbページが再送信されることは決してありません。私はでpreventDefaultを試してみましたが、以下に示すようにfalseを返しました：

$("form.edit_todo").on("submit", function (e) { 
    debugger 
    e.preventDefault(); 
    return false; 
    }) 

誰もが、私はそれを非常に感謝し、このを見て数分を持っている場合。これは今、2日間私を狂人にさせている。ありがとうございました！

Gitのレポは次のとおりです。https://github.com/jwolfe890/todoapp/blob/master/app/assets/javascripts/todo.js

Answer 1

に言及されていることを念頭に置いて動作するはずだと思いますバインド時にフォームがDOM内にまだ存在しないため、起動しません。あなたは.ugh3クラスで使用しているクリックイベントと同様に

、あなたはドキュメントに対して提出イベント登録する必要があります。

$(document).on('submit', 'form.edit_todo', function (e) { ... })

documentを定数である - それは常に存在し、したがって、任意のイベントリスナーをバインドすることができます。 submitイベントが発生した場合、documentは（イベントバブリングの結果を）それを検出し、jQueryのは、ターゲット要素（イベントを発生させるもの）を取り、任意の登録ハンドラ（ハンドラはあなた$.on機能を使用して作成されている）に対してそれを比較します。一致するものがあれば、そのハンドラを実行します。

Answer 2

こんにちは、私はあなたのためのいくつかの提案を持っている： あなたはjqueryののdocument.ready（）関数内のコードを入れています。次のように： - $("form.edit_todo").on("submit", ... -

$(document).ready(function(){ 
    $("form.edit_todo").on("submit", function (e) { 
    debugger 
    e.preventDefault(); 
    return false; }); }); 

私は、これは「form.edit_todoは」あなたが動的にフォームを追加しているとして、ハンドラを提出フォームオブジェクト