Question

I’m using jquery .mouseup() to close a popop when a user clicks outside of it. My issue is this only works the first time it’s used. I’ve tried the .on() version but that doesn’t help.

$(document).ready(function() {
    $(document).mouseup( function(e) {
      var container = $("#mpop-loop");
      if (container.has(e.target).length === 0) {
        container.fadeOut("fast").remove();
      }
    });
});

and

$(document).ready(function() {
    $(document).on("mouseup", function(e) {
      var container = $("#mpop-loop");
      if (container.has(e.target).length === 0) {
        container.fadeOut("fast").remove();
      }
    });
});

How can I make this work everytime it’s triggered?

Answer 1

.has only works on descendants, ignoring the element itself. Try this (you don’t need $(document).ready since you’re binding the event to the document anyway):

    $(document).on("mouseup", function(e) {
      var container = $("#mpop-loop");
      if (!container.has(e.target).length && !container.is(e.target)) {
        container.fadeOut("fast");
      }
    });

http://jsfiddle.net/mblase75/bWDXH/