Question

我正在使用个人项目的ajax和JQuery页面上加载元素。但是，将某些元素添加到DOM后，不可能在非常特殊的情况下显示它们。

当用户单击另一个用ajax加载的元素时，需要显示一些用ajax加载的html。

示例：

<!-- Element load with ajax and append to DOM -->

<div class="block1">
    <p>You have clicked</p>
</div>
<div class="block2">
    <p>Some Text</p>
</div>

我将.block1的css设置为display: none;，并且我希望单击.block2后css变为display: flex的{{1}}。

所以我已经用JQuery实现了这个功能：

.block1

我的麻烦是：

默认情况下，将$(".block2").click(function () { if ($(".block1").css("display") === "none") { $(".block1").css("display", "flex"); } else { $(".block1").css("display", "none"); } });设置为.block1时，该功能可以正常工作（单击display: flex使.block2消失，再次单击使{{ 1}}）。
在.block1上默认设置.block1时，此功能不起作用。但是该功能可以正确检测到（我已经设置了一些.block1消息，并且css也正在更新）。

有关信息：

css在样式表中初始化。

所以我的问题是：

为什么当css默认为display: none时，此方法不起作用，而当css默认为console.log()时，效果很好。以及我该如何解决？

Answer 1

替换$（“。block2”）。单击b

$(document).on('click', '.block2', function(){

     if ($(".block1").css("display") === "none") {
        $(".block1").css("display", "flex");
     } else {
         $(".block1").css("display", "none");
    }

  }
)

用ajax显示隐藏元素负载的问题

1 个答案: