问题在于fa-close
图标和jqueryhide()
函数。如果我使用的是简单的html属性,那么一切都可以正常工作,但是如果我使用的是HTML5data
属性,那么代码就不能正常工作。
如何隐藏#dialogbox
和#message
在.fa-close
单击中显示的?我的意思是,我只需要在点击#message
时隐藏两个div。因为这个,我撞到了我的头。。。
HTML格式
<div id="dialogbox"></div>
<div id="message"></div>
<div class="box">
<div data-category="#test" class="hoveris">OPEN</div>
</div>
<div id="test" class="item">some text <i class="fa fa-close"></i></div>
CSS
#dialogbox { position:absolute; width:100%; height:100%; background:rgba(0, 0, 0, 0.8); display:none; }
#message { position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; width:70%; height:70%; background:#fff; display:none; }
.box { float:left; margin:0; padding:30px; background:green; color:#fff; cursor:pointer; }
.item { display:none; }
JS公司
$('.box').click(function() {
var id = $(this).find('.hoveris').data('category');
var message = $(id).html();
$("#message").html(message).show();
$('#dialogbox').show();
});
$("#dialogbox").click(function () {
$('#dialogbox, #message').hide();
});
$("#message .fa-close").click(function(){ // NOT WORKING
$("#dialogbox, #message").hide();
});
JSFIDDLE
对不起,英语不好,谢谢你的回答!
最佳答案
经过一些调试,我已经错过了显而易见的。
$("#message").on('click', '.fa-close', function(){
$("#dialogbox, #message").hide();
});
您正在动态地更改消息div的内容,因此元素在绑定单击事件时不存在。因此,在现有元素上使用
on
回调,这样事件稍后会被捕获。关于jquery - 如果在绝对位置使用HTML5数据属性,则单击功能上的jQuery hide()无效,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32261809/