Question

我有一个面板interest，可以在点击时打开和关闭。当它第一次打开时（第一次点击），#interest-close按钮可见，并在点击时关闭面板。但是，第二个时间面板打开后，#interest-close按钮不再可见。它将从DOM中删除。

我尝试将#interest-close位置更改为绝对位置，将#interest更改为相对位置，但这不起作用。

我认为这与我将显示更改为block然后使用appendTo附加HTML这一事实有关，但我不明白为什么面板在第一次打开时正常工作，但在第二个关闭按钮消失，因此面板无法再次关闭。

可能导致此问题的原因是什么？

CSS：

#interest {
  position: absolute;
  z-index: 2;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  width: 25%;
  height: 100%;
  display: none;
}

#interest-close {
  right: 0px;
  margin-top: 20px;
  margin-right: 20px;
  float: right;
  top: 0px;
  width: 38px;
  height: 38px;
  border-radius: 19px;
  content: url('./back-button.svg');
  cursor: pointer;
  opacity: 0.7;
  font-size: 13px;
  display:inline-block;
}

#interest-close:hover {
  opacity: 0.9;
}

HTML：

<div id='interest'>
  <div id = 'interest-close'></div>
</div>

的JavaScript：

$("#interest-close").on('click', function() {

          $("#interest").attr("style", "display:none");

});



item.addEventListener('click', function(){

//fill panel with program info
    interest = document.getElementById("interest")


    interest.style.display = "block";

    $('<div style ="font-size:35px; margin-left:10px; margin-right: 10px; margin-top: 25px">' + prop.title + '</div>' +
            '<div style ="font-size:35px; margin-left:10px; margin-top: 25px;">' + "info info info info" + '</div>').appendTo("#interest");

 });

注意：使用innerHTML =代替appendTo()时，interest-close按钮根本不显示。

Answer 1

您需要维护DOM中的关闭按钮，而不是将其删除以便侦听器分离。我建议做的事情是每次删除除关闭按钮以外的所有内容。

$("#interest-close").on('click', function() {
    $("#interest").attr("style", "display:none");
});

item.addEventListener('click', function(){
    interest = document.getElementById("interest")
    interest.style.display = "block";

    $("#interest").children().not('#interest-close').remove();
    $("#interest-close").after('<div style ="font-size:35px; margin-left:10px; margin-right: 10px; margin-top: 25px">' + prop.title + '</div>' +
'<div style ="font-size:35px; margin-left:10px; margin-top: 25px;">' + "info info info info" + '</div>')
});

我不确定这会奏效。如果我们有一个小提琴可以玩更好。我关注的是当我们从#interest删除内容时。

我们可以做的另一件事是将监听器附加到文档，并且每次都替换innerHTML，因为事件将触发文档，然后触发到选择器。在这种情况下，替换innerHTML，就像我们在评论中讨论的那样，不会打破听众。

$(document).on('click', "#interest-close", function() {
    $("#interest").attr("style", "display:none");
})

附加HTML后删除子div

CSS：

HTML：

的JavaScript：

1 个答案: