2016-08-26 7 views
1

jQueryダイアログを終了した後、要素を削除する必要があります。 .remove()関数を使用しますが、この要素は.remove()が実行された後にキャラブルではありません。.remove()の後に呼び出し可能な要素

js内のオブジェクトを「破棄」し、親エレメントをリフレッシュせずに再び呼び出す方法。

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

      }); 
     }); 
    }); 
+0

'ダイアログ= NULLであることを確認しなければならない。' ' – Tushar

+0

dialog.detach();'! –

+0

@Tusharヘルプがヌルから、ダイアログを4回開いて閉じる。私はuseone()関数を使用しても4回ajaxを実行します。 –

答えて

0

オハイオ州、私は悪いミスをしました。私も、私が使用.oneを持っていた.createAuthorクリックごとに一度バインド機能ブロックを持っていた()

.oneは、()のコード内側の機能ではなく、を実行制限するとしています。

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

     }); 
    }); 

Iは$('.submitAuthors')$('#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> 
関連する問題