當事件處理程序連接到父HTML元素時，如何防止默認事件操作？

我有很多的，我希望被Ajax化，這樣，當我點擊鏈接，它會刪除的項目我的頁面上的鏈接，所以我連接器和事件處理到父DIV像這樣：當事件處理程序連接到父HTML元素時，如何防止默認事件操作？

<div id="parent"> 
    <a href='#' data-itemid='1'>Delete Me</a> 
    <a href='#' data-itemid='2'>Delete Me</a> 
    <a href='#' data-itemid='3'>Delete Me</a> 
</div>

而且我用下面的JQuery

$('#parent').delegate('a', 'ajax:beforeSend', function(event){ 
    event.preventDefault(); 
    var target = $(event.target); 
    if (target.is('a')) { 
     var itemid = target.attr('data-itemid'); 
     $.post("/item/"+itemid+'.json', { 
     _method: 'delete' 
     }); 
    } 
    }) 
    .live('ajax:success', function(event, data, status, xhr){ 
    var itemid = data + ''; 
    console.log(itemid); 
    $('item-' + itemid + '-content').fadeOut(); 
    });

的問題是，當我點擊鏈接時，POST被提交和我的網頁接收響應，但是event.preventDefault（）行似乎並不奏效，因爲點擊事件通過併發送第二個GET請求來重新加載我的頁面。

如何防止此頁面重新加載？我正在使用JQuery 1.5.1和Rails 3.0.7。

感謝

來源

2011-05-14 noli

只是一個猜測，還沒有嘗試過，但嘗試添加return false;到beforeSend匿名函數的結尾。

$('#parent').delegate('a', 'ajax:beforeSend', function(event){ 
    event.preventDefault(); 
    var target = $(event.target); 
    if (target.is('a')) { 
     var itemid = target.attr('data-itemid'); 
     $.post("/item/"+itemid+'.json', { 
     _method: 'delete' 
     }); 
    } 
    return false; 
    })

來源

2011-05-14 00:27:57

嗯，看...的事情是，如果我這樣做，或者如果我使用event.stopPropagation（），它會停止發生GET請求，但由於某種原因它也停止ajax：執行成功（通常在錯誤的GET請求後正常執行） – noli 2011-05-14 00:32:23

我對委託（）函數沒有任何經驗，但它看起來不像發送click事件，這是您希望避免的默認操作。

尋找jQuery的文檔上，委託（）是活的（）相對：http://api.jquery.com/delegate/

所以我可能會嘗試像...

$('#parent a').live('click', function(event){ 
    event.preventDefault(); 

    var itemid = $(this).attr('data-itemid'); 

    $.post("/item/"+itemid+'.json', { 
     _method: 'delete' 
    }); 
    }) 
...

來源

2011-05-14 00:40:54

我預計這會起作用，但現在它發送GET befor e POsT ..這可能是因爲Rails劫持click事件，這就是爲什麼我使用ajax：beforeSend – noli 2011-05-14 01:11:44

Christian是正確的，因爲event.preventDefault（）可以工作，所以您需要綁定/委託給'click '事件。不過，您可以通過使用現有的具有附加綁定函數的委託函數來捕獲單擊事件，從而調用event.preventDefault（）來解決此問題。 – 6twenty 2011-05-26 13:33:29

顯然，這是不是「 Rails「通過AJAX鏈接刪除項目的方式。代替手工處理Ajax的設置，您可以使用類似於下面的眼中釘

link_to 'Delete Item', @item, :'data-itemid' => item.id, :class => 'delete-item-link', :remote => true, :'data-method' => :delete, :'data-type' => :json

然後，構建從頁面移除該項目，並處理來自控制器的JSON響應：

$('#parent').delegate('a', 'ajax:success', function(event, data, status, xhr){ 
    var itemid = data + ''; 
    $('#item-' + itemid + '-content').fadeOut(); 
    });

這完成了我所設定的最終目標。這就是說，它並沒有真正回答我原來的問題，所以我會很感激任何進一步的輸入。

顯然，我也看到了，有與jQuery的鏈接和 '.live（）' 的問題，不以 '.delegate（）'

http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html

不存在知道如何準確，這仍然是

來源

2011-05-14 02:13:09 noli

當事件處理程序連接到父HTML元素時，如何防止默認事件操作？

回答

相關問題