如何僅在特定元素可見時觸發事件

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()的情況相同。