jQuery 的 event.stopPropagation() 导致 Rails 出现问题 :remote => true

Question

我创建了一些自定义“弹出窗口”(最初使用“display:none;”样式)，这些窗口通过相邻的“.popup_trigger”链接进行切换，具有以下汇总功能:

# /public/javascripts/application.js
jQuery(document).ready(function(){

  // Trigger a popup
  jQuery('.popup_trigger').live('click', function(event) {
    jQuery(this).next('.popup').toggle(0, function() {
      // Prevent the jQuery('body').click() below if the click occurs inside the popup
      jQuery(this).click(function(event){
        event.stopPropagation();
      });
    });
    return false;
  });

  // "Outside" click hides popup
  jQuery('body').click(function() {
    jQuery('.popup:visible').toggle();
  });
});

这对于显示弹出窗口然后在发生“外部”点击时隐藏它们非常有效。然而，在一个这样的弹出窗口中，我有以下内容:

<%= link_to 'Delete medical record', medical_record, :confirm => 'Permanently delete this medical record?', :method => :delete, :remote => true %>

呈现以下内容:

<a href="/medical_records/1" data-confirm="Permanently delete this medical record?" data-method="delete" data-remote="true" rel="nofollow">Delete medical record</a>

我的问题是，当我触发弹出窗口显示时，event.stopPropagation(); 调用似乎禁用了此链接的远程功能。也就是说，当我单击该链接时，它会发送一个普通的旧(非远程)“/medical_records/1”GET 请求，该请求查找显示操作而不是销毁。

如果我在上面的 JS 中注释掉 event.stopPropagation(); ，远程链接工作正常，但当我单击内部时，弹出窗口会隐藏。

我该怎么做才能拥有它，以便事件弹出窗口仅在在其外部单击时隐藏，并且还允许远程链接工作？

谢谢。

Answer 1

有完全相同的问题:现在我使用这个插件，效果很好:

http://plugins.jquery.com/project/ba-jquery-outside-events-plugin