Javascript 当事件处理程序附加到父HTML元素时，如何防止默认事件操作？

我在我的页面上有很多链接，我想将其转换为ajaxified，这样当我单击链接时，它会删除该项，因此我将事件处理程序附加到父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>

问题是，当我单击链接时，帖子会被提交，我的页面会收到响应，但是event.preventDefault（）行似乎不起作用，因为单击事件会通过并发送第二个GET请求来重新加载我的页面

如何防止重新加载此页面？我使用的是jQuery1.5.1和Rails 3.0.7

---

谢谢

只是一个猜测，没有尝试过，但尝试添加

返回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;
  })

---

只是一个猜测，没有尝试过，但尝试添加

返回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;
  })

---

我对delegate（）函数没有任何经验，但它看起来不像是在发送click事件，这是您希望避免的默认操作

查看jQuery文档，delegate（）是live（）的一个亲戚：

所以我可以试试像

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

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

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

---

我对delegate（）函数没有任何经验，但它看起来不像是在发送click事件，这是您希望避免的默认操作

查看jQuery文档，delegate（）是live（）的一个亲戚：

所以我可以试试像

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

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

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

---

显然，这不是通过AJAX链接删除项目的“Rails”方式。不必手动处理ajax设置，您可以使用类似于以下Eyeshore的构造

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（）中不存在这些问题

---

不知道这有多准确显然，这不是通过AJAX链接删除项目的“Rails”方式。不必手动处理ajax设置，您可以使用类似于以下Eyeshore的构造

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（）中不存在这些问题

---

我不知道这有多准确。好吧，看。。。问题是，如果我这样做，或者如果我使用event.stopPropagation（），它将停止GET请求的发生，但出于某种原因，它也会停止ajax:success的执行（通常在错误的GET请求之后正常执行），请参阅。。。问题是，如果我这样做，或者如果我使用event.stopPropagation（），它将停止GET请求的发生，但由于某种原因，它也会停止ajax:success的执行（通常在错误的GET请求之后正常执行），我原以为这会起作用，但现在它会在POsT之前发送GET。。这可能是因为Rails劫持了click事件，所以我使用ajax:beforeSendChristian是正确的，对于event.preventDefault（），您需要绑定/委托到“click”事件才能工作。但是，您可以通过使用现有的委托函数和附加的绑定函数来捕获click事件，并在其中调用event.preventDefault（）来解决此问题。我原以为这会起作用，但现在它会在发布之前发送GET。。这可能是因为Rails劫持了click事件，所以我使用ajax:beforeSendChristian是正确的，对于event.preventDefault（），您需要绑定/委托到“click”事件才能工作。但是，您可以通过使用现有的委托函数和附加的绑定函数来捕获click事件，并在其中调用event.preventDefault（）来解决此问题。