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;

})

})

当我运行页面时，脚本按照设计工作我ajax表单，任务成功。成功后，它会用自己的新副本替换表单。所有这些工作除了完成之外，替换表单不再适用于Java脚本。

Answer 1

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

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

简单地改变：

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

为：

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

}）;

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

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

有关工作示例，请参阅此codepen。

希望这有帮助。

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

1 个答案: