当事件处理程序连接到父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元素时，如何防止默认事件操作？

回答

相关问题