Question

I’ve created some custom “popups” (initially styled with “display:none;”) that are toggled via an adjacent “.popup_trigger” link with the following summarized functionality:

# /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();
  });
});

This works fine for displaying the popups and then hiding them when an “outside” click occurs. However, inside one such popup I have the following:

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

Which renders the following:

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

My problem is that when I trigger the popup to display, the event.stopPropagation(); call appears to disable the remote functionality of this link. That is, when I click the link, it sends a plain old (not remote) GET request of ‘/medical_records/1’ which looks for the show action instead of destroy.

If I comment out the event.stopPropagation(); in my JS above, the remote link works fine, but then the popup hides when I click inside.

What can I do to have it so an active popup hides only when clicked outside of itself, and also allow the remote links to work?

Thanks.

Answer 1

Had exactly the same problem: Now I use this plugin, works great:

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