jQuery 如果在绝对位置使用 HTML5 数据属性，点击功能的隐藏（）不起作用

Question

问题出在 fa-close 图标和 jquery hide() 功能上。如果我使用简单的 html 属性，那么一切正常，但如果我使用 HTML5 data 属性，那么代码就不起作用。

如何在 #message 中显示的 .fa-close 单击上同时隐藏 #dialogbox 和 #message？我的意思是，当我点击 .fa-close 时，我需要隐藏两个 div ONLY。因为这个我正在敲我的头...

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

抱歉英语不好，感谢您的回答！

Answer 1

经过一些调试后，我错过了明显的东西。

$("#message").on('click', '.fa-close', function(){
    $("#dialogbox, #message").hide();
});

您正在动态更改消息的内容div因此当您绑定点击事件时该元素不存在。因此，您可以在现有元素上使用 on 回调，以便稍后可以捕获该事件。

jQuery 如果在绝对位置使用 HTML5 数据属性，点击功能的隐藏（）不起作用

jQuery hide() on click function does not work if using HTML5 data attribute in absolute position

html

jquery

show

hide