如何仅在特定元素可见时触发事件

Question

我有一个提醒div，它在用户单击链接时显示。现在我想要做的就是当有人在它外面点击时隐藏那个div。它默认有一个fadeoff事件附加，但我希望用户能够通过点击其他地方隐藏该div。

我试着把$('body').click放在函数调用中，但它不起作用。请帮帮忙，这里是我的javascript

var messageDiv = $('<div id="cannotDoDiv"></div>'); 
     $('body').append(messageDiv); 

     function appendDiv(this_element,msg) 
     { 
     var pos = this_element.offset(); 
     var width = this_element.width(); 
     messageDiv.css({ 
      left: (pos.left - 20) + 'px', 
      top: pos.top + 30 + 'px' 
     }); 
     $('#cannotDoDiv').fadeOut(); 
     $('#cannotDoDiv').html(msg).show().delay(1000).fadeOut(); 
     $('body').click(function(){ 
      $('#cannotDoDiv').hide(); 
     }); 
     } 

    $("span#selfLike").click(function(){ 
     appendDiv($(this),'You cannot like your own post!'); 
    }); 

当我从功能$("span#selfLike").click工作正常删除

$('body').click(function(){ 
    $('#cannotDoDiv').hide(); 
}); 

，否则就不是被解雇。

Answer 1

编辑：我想，我明白你想什么..看看更新的代码，低于该

1. 用途.one只有一次绑定，并完成后解除绑定..

2. 用在fadeIn回调打完格是可见它只会绑定..

   //used call back function so it will be called only after it is 
   //completly visible 
   $('#cannotDoDiv').html(msg).fadeIn("slow", function() { 
   
       // below will be executed once and then unbind 
       $(document).one('click', function(){ 
        $('#cannotDoDiv').fadeOut(); 
       }); 
   
   }); 
   

下面是完整的代码..更新DEMO这里

$(document).ready (function() { 
    var messageDiv = $('<div id="cannotDoDiv"></div>'); 

    $('body').append(messageDiv); 

function appendDiv(this_element,msg) 
{ 
    var pos = this_element.offset(); 
    var width = this_element.width(); 
    messageDiv.css({ 
     left: (pos.left - 20) + 'px', 
     top: pos.top + 30 + 'px' 
    }); 
    $('#cannotDoDiv').hide(); 

    $('#cannotDoDiv').html(msg).fadeIn("slow", function() { 

     $(document).one('click', function(){ 
      $('#cannotDoDiv').fadeOut(); 
     }); 

    });  

    $('#cannotDoDiv').one('click', function(){ 
     $('#cannotDoDiv').fadeOut(); 
    }); 
} 

$("span#selfLike").click(function(event){ 
    appendDiv($(this),'You cannot like your own post!'); 
    event.stopPropagation(); 
    }); 

}); 

注：当你点击$('#cannotDoDiv') DIV这也将关闭。如果您不希望发生这种情况，请添加一个点击监听器和stopPropogation。

尝试$(document).click(function(){而不是身体。

Answer 2

如果在div元素上发射，因此没有达到document您可以停止click事件的传播，然后绑定一个click事件处理程序document元素隐藏div：

$('#cannotDoDiv').on('click', function (event) { 
    event.stopPropagation(); 
}); 
$(document).on('click', function() { 
    $('#cannotDoDiv').hide();//you can now hide the div element because it was not clicked on but a click event fired 
}); 

请注意，.on()是jQuery 1.7中的新增功能，在这种情况下与使用.bind()相同。

你也该click事件处理程序从document未绑定，一旦触发停止监听事件如果没有必要这么做：

$(document).on('click.cannotDoDiv', function() { 
    $('#cannotDoDiv').hide();//you can now hide the div element because it was not clicked on but a click event fired 
    $(this).off('click.cannotDoDiv'); 
}); 

由于我使用的命名空间，事件将不会删除附加到document元素的任何其他事件处理程序。此外，.off()是jQuery 1.7中的新增功能，与.unbind()的情况相同。