使用.val（''）重置字段後，表單字段爲空，直到頁面重新加載

Question

在我的文檔中，我使用Bootstrap Modal動態加載文檔。在這個模式窗口中，我使用ajax將兩個表單域的值添加到數據庫中。在成功請求之後，我重置了使用.val（''）提交的兩個表單。這工作正常，但是當我關閉模式窗口並再次打開時，每次表單域都是空的。只有當我重新加載頁面並打開Modal時，一切正常。

錯誤在哪裏？直到我重新加載頁面爲止，這兩個表單字段的重置將用於整個會話。

這裏是我的Ajax代碼：

 $(document).on('click', 'form.form-inline button', function(e) { 

     e.preventDefault ? e.preventDefault() : e.returnValue = false; 

     var pMacaddr = $('#macaddr').val(); 
     var pHostname = $('#hostname').val(); 

     var that = $(this); 

     $.ajax({ 
      async: true, 
      type: 'POST', 
      url: propertie.backend+'?action=ajax&method=addmac&lang='+propertie.language+'&code='+Math.random(), 
      dataType: 'json', 
      data: { 
       'hostname': pHostname, 
       'macaddr': pMacaddr, 
      },error: function(data) { 
       alert('PHP-Error: '+data['responseText']); 
      },success: function(data) { 
       if (data.success === false) { 
        alert(data.message); 
       } else { 

        var html = "<tr id=\""+pId+"\">\n"; 
         html += "\t<td>"+pMacaddr+"</td>\n"; 
         html += "\t<td>"+pHostname+"</td>\n"; 
         html += "\t<td><a href=\"javascript:void(0);\" title=\""+propertie.l10n.delete+"\">"; 
         html += "<i class=\"fa fa-close fa-fw\"></i></a><a href=\"javascript:void(0);\""; 
         html += " title=\""+propertie.l10n.edit+"\"><i class=\"fa fa-pencil fa-fw\"></i></a></td>\n</tr>\n"; 

         $(that).closest("tr").before(html); 

         $('#macaddr').val(''); 
         $('#hostname').val(''); 

       } 
      },cache: false, 
     }); 

    }); 

要打開莫代爾我用這個代碼：

 $(document).on('click', '[data-toggle="ajaxModal"]', function(e) { 
     $('#ajaxModal').removeData('bs.modal'); 
     e.preventDefault ? e.preventDefault() : e.returnValue = false; 
     var $this = $(this) 
     , $remote = $this.data('remote') || $this.attr('href') 
     , $modal = $('<div class="modal fade" id="ajaxModal"><div class="modal-dialog"><div class="modal-content"></div></div></div>'); 
     $('body').append($modal); 
     $modal.modal({remote: $remote}); 
     $modal.modal('show'); 
    }); 

Answer 1

我發現我錯了。 Modal元素只是隱藏的，不能從文檔中移除。我修改了我的Open-Modal功能，現在當關閉Modal時，Modal窗口將從文檔中刪除。

 // open modal 
    $(document).on('click', '[data-toggle="ajaxModal"]', function(e) { 

     e.preventDefault ? e.preventDefault() : e.returnValue = false; 

     var $this = $(this) 
     , $id = $this.data('id') || 'ajaxModal' 
     , $remote = $this.data('remote') || $this.attr('href') 
     , $modal = $('<div class="modal fade" id="'+$id+'" role="dialog"><div class="modal-dialog"><div class="modal-content"></div></div></div>'); 

     $('body').append($modal); 
     $modal.modal({remote: $remote, keyboard: false, backdrop: false}); 
     $modal.modal('show'); 

     // On hidden event, remove the current modal from document 
     $(document).on('hidden.bs.modal', '#'+$id, function(e) { 
      $(this).remove(); 
     }); 

    }); 

現在表單字段與val（）一起使用。