Divコンテンツを置き換え、JavaScriptに置き換えられたコンテンツを表示する方法

Question

私はページ上にフォームを持っています。私はスクリップは、私は、フォームをAjaxの設計どおりに動作しますページを実行すると

<div id="form_catch"> 
<form id="form2"> 
<div><input type="button" value="Dear Diary" id="add" /><input type="button" 
value="Dear Friend" id="add_1" /></div> 
<div><input type="text" id="salutations" name="salutations" value=""/></div> 

<input type="submit" value="Submit" class="submit" /> 
</form> 
</div> 

が、私はこのフォーム

$(document).ready(function(){ 
    var form_box_copy = $('#form_catch').html() 
    $("#add").click(function(){ 
     $('input#salutations').val('Dear Diary,');}); 
    $("#add_1").click(function(){ 
     $('input#salutations').val('Dear Friend,');}); 
     //console.log('test button'); 
$("form#form2").submit(function(evt){ 
    var formData = new FormData($(this)[0]); 
    $.ajax({ 
    url: 'http://wei.rocks/test2.html', 
    type: 'GET', 
    data: { 
     format: 'html' 
    }, 
    enctype: 'multipart/form-data', 
    processData: false, 
    error: function(){alert('You Failed');}, 
    success: function (response) { 
     alert('You passed'); 
      $('#form_catch').html(form_box_copy + "html replaced"); 
      $('#form_catch').append("Test222222222");} 
    }); 


    return false; 

}) 

}) 

を操作するためにはJavaScriptを使用して、タスクが成功しています。成功した後、フォームは新しいフォームで置き換えられます。これらの作業はすべて完了した時点を除いて、フォームの置換はJavaスクリプトでは長時間働いていません。

Answer 1

これは、フォームを新しいhtmlに置き換えると、フォームに添付されているsubmitイベント登録を破棄するためです。

イベントをバイパスするには、イベントを再登録するか、より良い方法として、ドキュメントレベルでイベントを登録することができます。

単に変更：

$("form#form2").submit(function(evt){ 
// your code 
}); 

た：

$(document).on('submit', '#form2', function(evt) { 
// your code 
    }); 

}）。

これは、イベントがフォームレベルではなくドキュメントレベルで登録されているため（ドキュメントが置き換えられることはないため）に機能するようになりました。

一般に、DOM要素を置き換える場合、DOM要素に登録されたイベントは機能しなくなります。これは、要素の親への登録が（必要な場合）より良いアプローチである理由です。

実例はcodepenを参照してください。

これが役に立ちます。