Callable Element nach .remove()

Question

Ich muss Element nach dem Beenden von jQuery Dialog entfernen. Ich verwende .remove() Funktionen, aber dieses Element ist nicht verkabelbar, nachdem .remove() ausgeführt wird.

Wie "Objekt" in js "zu zerstören" und die Möglichkeit, es wieder aufzurufen, ohne zu aktualisieren Elternelement.

$('.createAuthor').click(function() { 
     dialog = $('#form').dialog({ 
      title: 'Add new author', 
      closeOnEscape: true, 
      modal: true, 
      resizable: false, 
      draggable: true, 
      close: function(event, ui) { 
       $(this).dialog("destroy"); 
       dialog.remove(); 
      } 
     }); 
     $('.submitAuthors').one('click', function() { 
      var fname = $('#fname').val(), 
       lname = $('#lname').val(), 
       email = $('#email').val(); 
      $.ajax({ 
       method: 'POST', 
       url: "/sci-profile/authors/approval", 
       data: { 
        fname: fname, 
        lname: lname, 
        email: email, 
        articleId: articleId 
       }, 
       success: function(response) 
       { 
        $("#authors tbody").append("<tr>" + 
          "<td>" + fname + ' ' + lname + "</td>" + 
          "<td>" + email + "</td>" + 
          "</tr>"); 
        $('#form')[0].reset(); 
        dialog.dialog('destroy'); 
       } 

      }); 
     }); 
    }); 

Answer 1

Ohh, wie sehr ich Fehler gemacht habe. Ich hatte binden Funktionsbaustein einmal pro .createAuthor Klick selbst hatte ich Gebrauch .one()

.one() annehmen, um zu begrenzen Code innere Funktion ausführen, aber nicht äußeren.

$('.createAuthor').click(function() { 
     dialog = $('#form').dialog({ 
      title: 'Add new author', 
      closeOnEscape: true, 
      modal: true, 
      resizable: false, 
      draggable: true, 
      close: function(event, ui) { 
       $(this).dialog("destroy"); 
       dialog.remove(); 
      } 
     }); 
    }); 

Ich brauche nur die Funktion unten separaten zu verwenden.

$('.submitAuthors').one('click', function() { 
     var fname = $('#fname').val(), 
      lname = $('#lname').val(), 
      email = $('#email').val(); 
     $.ajax({ 
      method: 'POST', 
      url: "/sci-profile/authors/approval", 
      data: { 
       fname: fname, 
       lname: lname, 
       email: email, 
       articleId: articleId 
      }, 
      success: function(response) 
      { 
       $("#authors tbody").append("<tr>" + 
         "<td>" + fname + ' ' + lname + "</td>" + 
         "<td>" + email + "</td>" + 
         "</tr>"); 
       $('#form')[0].reset(); 
       dialog.dialog('destroy'); 
      } 

     }); 
    }); 

Ich muss feststellen, dass $('.submitAuthors') ist in $('#form')

<form id="form" style="display: none"> 
      <label for="name">First name</label><input type="text" name="fname" id="fname" class="text ui-widget-content ui-corner-all"> 
      <label for="name">Last Name</label><input type="text" name="lname" id="lname" class="text ui-widget-content ui-corner-all"> 
      <label for="email">Email</label><input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all"> 
      <span class="submitAuthors">Submit</span> 
</form>