Rails、Popups、Ajax 删除和 stopPropagation答案

【问题标题】：Rails, Popups, Ajax deletes and stopPropagationRails、Popups、Ajax 删除和 stopPropagation
【发布时间】：2013-05-01 07:28:53
【问题描述】：

我有一个 rails 项目，它在弹出窗口中有一个标准 rails 删除链接。

我在页面上有多个弹出窗口，所以我有一个 隐藏动作附加到正文 (onclick) 和一个 stopPropagation 事件附加到弹出窗口，以便在弹出窗口内单击不会隐藏它，但点击其他任何地方都会隐藏所有弹出窗口。

但是，这似乎影响了我的删除链接，这些链接位于弹出窗口中。这似乎迫使他们获取而不是发布，这意味着他们没有删除。并且没有出现确认对话框。

如果我将删除链接移到弹出窗口之外，它会按预期工作。

一些代码：

$('body').click(function() {
    $('.popover').hide();
});
$('.popover').click(function(ev){
    ev.stopPropagation();
});

还有rails (Haml) 视图：

.popover
    = link_to [task], :confirm => 'Are you sure you want to delete?', :method => :delete, :remote => true

如何使用 stopPropagation 让 delete 在父级内部工作？

感谢您的帮助。

【问题讨论】：

【解决方案1】：

结合使用 jQuery .not() 函数和 CSS * 选择器：

$('body *').not('.popover, .popover *').click(function() {
    $('.popover').hide();
});

【讨论】：

【解决方案2】：

它不起作用的原因是因为这些行。

$('.popover').click(function(ev){
   ev.stopPropagation();
});

它们会阻止所有 javascript 在弹出窗口中单击的任何内容上执行。这会将您的链接变成没有任何 javascript 的标准链接，因此不会执行发布请求。

您可以按照 RyanBrodie 的建议，使用 jQuery 和 * 选择器来解决这个问题。

$('body *').not('.popover').click(function() {
  $('.popover').hide();
});

要确保弹出框内的元素不会触发隐藏弹出框，请执行以下操作：

$('body *').not('.popover').not('.popover *').click(function() {
  $('.popover').hide();
});

【讨论】：