當事件處理程序附加到父HTML元素時，如何防止默認事件動作？

Question

我的頁面上有很多鏈接，我希望將它們進行修飾，以便當我單擊該鏈接時，它會刪除該項目，因此我將事件處理程序附加到父div上，如下所示：

<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（）行似乎不起作用，因為click事件通過並發送了第二個GET請求以重新加載我的頁面。

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

謝謝

Answer 1

只是一個猜測，還沒有嘗試過，但是嘗試添加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;
  })

Answer 2

我沒有使用proxy（）函數的任何經驗，但是您似乎沒有發送click事件，這是您要避免的默認操作。

在jQuery文檔中查找，proxy（）是live（）的親戚： 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'
    });
  })
...

Answer 3

顯然，這不是通過AJAX鏈接刪除項目的“導軌”方法。 您可以使用類似於以下eyesore的結構，而不是手動處理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

不知道那還有多准確