Ajax和引導模式

我想做一個Ajax調用刪除用戶使用引導模式。該模式用於確認目的，它是以下內容。Ajax和引導模式

<!-- Modal --> 
<div id="deleteModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
<h3 id="myModalLabel">Delete user</h3> 
</div> 
<div class="modal-body"> 
<p>You are about to delete this user. Are you sure that you want to continue?</p> 
</div> 
<div class="modal-footer"> 
<button id="confirm" class="btn btn-primary">Yes</button> 
<button id="cancel" class="btn" data-dismiss="modal" aria-hidden="true">No, leave</button> 
</div> 
</div>

然後我使用下面的JavaScript來處理用戶輸入

$('a#delete').click(function(e){ 
     var anchor = this; 
     $('#deleteModal').modal('show'); 
     $('button#confirm').click(function(e){ 
      $('#deleteModal').modal('hide'); 
      $.ajax({ 
       url: $(anchor).attr('href'), 
       success:function(result){ 
        $(anchor).closest('tr').addClass("error"); 
        $(anchor).closest('tr').delay(2000).fadeOut(); 
       }}); 
     }); 
     return false; 
    });

用戶必須點擊是這樣

<a id="delete" href="/admin/edit/user/delete/30" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a>

它的工作聯繫，但我注意到的東西奇怪的事情發生。如果我點擊刪除一個用戶，並選擇從模式中取消操作，然後選擇刪除另一個用戶確認操作，則兩個用戶都將被刪除。

我認爲我聲明的規則仍然適用於會話期間點擊過的對象。有沒有辦法避免這種情況？

來源

2013-01-21 kechapito

這是因爲您在button#confirm上註冊click事件的方式。每次你點擊刪除按鈕，你都會註冊一個新的點擊事件處理程序到模式對話框的確認按鈕。

問題與你的方法是demonstrated here。

它可以通過分割邏輯被固定成兩個部分

$('button#confirm').click(function(e){ 
    $('#deleteModal').modal('hide'); 
    $.ajax({ 
     url: $('#deleteModal').attr('href'), 
     success:function(result){ 
      $(anchor).closest('tr').addClass("error"); 
      $(anchor).closest('tr').delay(2000).fadeOut(); 
     }}); 
}); 

$('a#delete').click(function(e){ 
    var anchor = this; 
    $('#deleteModal').modal('show').attr('href', $(anchor).attr('href')); 
    return false; 
});

在這裏，我們只有一次在頁面加載註冊confirm點擊事件，但點擊刪除按鈕，當我們通過一個環境信息發送到通過user屬性確認模態。在確認回調中，我們使用這個上下文信息來確定哪個用戶必須被刪除。

您可以在demo here中測試它。

來源

2013-01-21 12:56:02

這解決了問題，但'$（錨）'不'$可用（ '按鈕＃確認'）。點擊（函數（E）'。 – kechapito

爲什麼你想在確認回調中使用'anchor'？如果你需要錨，那麼下面的查詢應該解決它'var anchor = $（'a＃delete [href =「'+ $（'＃deleteModal'）。attr（'href'）+'」]'）;'' –

當用戶點擊鏈接時，即使點擊了對話框按鈕，也會提交鏈接。你需要阻止默認行爲：e.preventDefault();

$('a#delete').click(function(e){ 
    e.preventDefault(); 
    var anchor = this; 
    $('#deleteModal').modal('show'); 
    $('button#confirm').click(function(e){ 
     $('#deleteModal').modal('hide'); 
     $.ajax({ 
      url: $(anchor).attr('href'), 
      success:function(result){ 
       $(anchor).closest('tr').addClass("error"); 
       $(anchor).closest('tr').delay(2000).fadeOut(); 
      }}); 
    }); 
    return false; 
});

一種不同的方式來做到這一點並不把href值的鏈接。你已經擁有的用戶屬性，所以它是某種形式的重複：

<a id="delete" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a>

和JS：

$('a#delete').click(function(e){ 
    var anchor = this; 
    var del_link = '/admin/edit/user/delete/' + $(anchor).attr('user'); 
    $('#deleteModal').modal('show'); 
    $('button#confirm').click(function(e){ 
     $('#deleteModal').modal('hide'); 
     $.ajax({ 
      url: del_link, 
      success:function(result){ 
       $(anchor).closest('tr').addClass("error"); 
       $(anchor).closest('tr').delay(2000).fadeOut(); 
      }}); 
    }); 
    return false; 
});

你使用相同的delete ID來刪除鏈接？

來源

2013-01-21 12:35:33 AlecTMH

使用.unbind（）解除您的單擊事件或執行.one（）向您單擊事件確保它只執行一次。

$('a#delete').one('click', function(e) {

或

$('a#delete').unbind().live('click', function(e) {

來源

2014-03-05 21:20:55 Jimubao

Ajax和引導模式

回答

相關問題