问题在于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/

10-11 23:28
查看更多