jquery - .mouseup() 只触发一次

Question

当用户在弹出窗口之外单击时，我正在使用 jquery .mouseup()来关闭弹出窗口。我的问题是这只在第一次使用时才有效。我试过这个.on()版本，但没有帮助。

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

和

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

每次触发时，我怎样才能使它工作？

Answer 1

您可以尝试使用“on”函数的委托并使用“:not(.popup-class)”过滤器将点击事件委托给页面上除弹出窗口之外的所有元素吗？只是一个想法，以便单击的弹出窗口也不会触发关闭。

Answer 2

$('body').click(function(){

    $("#mpop-loop").fadeOut("fast");

});

如果您删除“#mpop-loop”，那么当您再次打开容器时，可能必须再次添加该事件。

Answer 3

.has仅适用于后代，忽略元素本身。试试这个（你不需要$(document).ready，因为你将事件绑定到文档）：

    $(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/