在Rails中刪除行時發生事件冒泡問題

我有一行用戶輸入事務。在交易的索引頁面（列表）上，我想允許用戶將鼠標懸停在表格行上並單擊它以打開/編輯。我這樣做的JavaScript（ofcourse :)在Rails中刪除行時發生事件冒泡問題

$('.transaction-row').on('click', function(e) { 
    window.location.href = '/transactions/'+$(this).data('id')+'/edit'; 
    return false; 
});

能正常工作，當用戶點擊該行，它採取他們的編輯頁面。

問題是，我也有一個行內的刪除按鈕，我想保留在那裏。

<%= link_to transaction, method: :delete, data: { confirm: 'Are you sure?' } do %> 
    Delete 
<% end %>

所以，當我點擊它時，它會冒泡到行並打開編輯頁面。我想我會用Javascript處理它，並使用「返回false」來防止冒泡，但我不能發送「刪除」HTTP動作 - 或者至少我不知道如何去做。

我嘗試這樣使用jQuery：

$('.delete-transaction-link').on('click', function(e) { 
    if(confirm('Are you sure?')) { 
    var url = '/transactions/'+$(this).data('id'); 
    $.ajax({ 
     url: url, 
     type: "DELETE" 
    }).done(function(){ 
     window.reload(); 
    }); 
    } 
    return false; 
    e.preventDefault(); // Prevent link from following its href 
});

..但瀏覽器給了我一些預警警報，告訴我「這個網頁被重定向到一個新的位置，你想重新發送表單數據你。已經輸入到新的位置？「 - 不理想

任何人都可以給我任何想法我可以做到這一點。我不太熟悉將HTTP動作/方法（例如DELETE）放入鏈接或軌道。謝謝你的幫助。

來源

2014-02-17 Martyn

是$（this）.data（'id'）給你正確的ID嗎？我不確定，但我相信$（this）.data（'id'）應該被替換爲$（this）.attr（'id'）？ –

您的preventDefault()永遠不會被調用，因爲它位於return語句之後。切換這兩行，並在事件到達行的處理程序之前應該捕獲該事件。

$('.delete-transaction-link').on('click', function(e) { 
    // ... your ajax stuff 

    e.preventDefault(); // Prevent link from following its href 
    return false; 
});

但是，ajax的要點是頁面不會完全重新加載。在你的情況下，當刪除操作完成時，你正在重新加載頁面。相反，您可以通常鏈接到此操作，然後重定向到Rails控制器中的列表頁面，而不必使用ajax。

如果你仍然想使用ajax，你應該刪除（或至少隱藏和禁用）使用Javascript刪除的行。

來源

2014-02-17 13:47:33 KappaNossi

'e.preventDefault（）; //阻止鏈接跟隨其返回false;' – Martyn

err ...再次來到？ – KappaNossi

在Rails中刪除行時發生事件冒泡問題

回答

相關問題