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();调用似乎会禁用此链接的远程功能。也就是说，当我点击链接时，它会发送一个普通的（非远程）GET请求'/ medical_records / 1'，它会查找show动作而不是destroy。

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

我该怎么办才能拥有它，这样只有在自身外部点击时，活动弹出窗口才会隐藏，并且还允许远程链接工作？

感谢。

Answer 1

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

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

Answer 2

我遇到了同样的问题，我找到的唯一解决方案是通过jQuery“手动”发送ajax请求：

jQuery(document).ready(function(){
    jQuery('#notification_<%=notification.id%> .remove-not a').on('click', function(e) {
      $.ajax({
        url: '<%=notification_path(notification)%>',
        type: 'delete',
        dataType: 'script',
        success:function(data){
        }
      });
      e.preventDefault();
      e.stopPropagation();
    });
});

这很好但是如果有人有更好的解决方案，我很乐意尝试一下！：）

jQuery event.stopPropagation（）导致Rails出现问题：remote =＆gt;真正

2 个答案: