我有一个提醒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!');
});
当我删除
$('body').click(function(){
$('#cannotDoDiv').hide();
});
来自我的函数$("span#selfLike").click
正常工作,否则它不会被解雇。
答案 0 :(得分:1)
编辑:我想,我明白你在尝试什么..请参阅下面的更新代码
.one
仅绑定一次并在完成后解除绑定.. 用于fadeIn
回调,因此只有在div可见后才能绑定..
//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(){
而不是身体。
答案 1 :(得分:0)
如果click
元素在div
元素上触发,它可以阻止document
事件的传播,因此它不会到达click
,然后绑定document
事件隐藏div
的{{1}}元素的处理程序:
$('#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()
相同。