Question

我的页面上有很多链接，我想要被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>

我使用了以下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

我对delegate（）函数没有任何经验，但看起来你并没有发送click事件，这是你要避免的默认操作。

查看jQuery文档，delegate（）是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链接删除项目的“Rails”方式。您可以使用类似于以下眼睛的构造

，而不是手动处理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上存在chaining和'.live（）'的问题，与'.delegate（）'不存在

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

不知道还有多准确

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

3 个答案: