如何替换DIV内容并让JavaScript查看替换内容

Question

我在页面上有一个表格。

 <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>

我使用JavaScript操纵此表格

$(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;
})
})

当我运行页面时，脚本按设计i ajax的表单工作，任务是成功的。成功之后，它将形式替换为新的自我副本。所有这些工作，除了完成后，该表单的替换并不长时间使用Java脚本。

Answer 1

发生这种情况的原因是因为当您用新的HTML替换表单时，它会丢弃附带的submit事件注册。

要绕过它，您可以重新注册事件，或者作为更好的方法，请在文档级别注册事件。

简单地更改：

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

to：

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

}）;

现在应该起作用，因为事件已在文档级别注册而不是在表单级别上注册（并且文档永远不会被替换）。

通常，如果您要替换DOM元素，则注册给它们的事件将不再起作用。这就是为什么注册元素父母是一种更好的方法（需要时）。

有关工作示例，请参见此Codepen。

希望这会有所帮助。