Javascript .on（'；单击'；）起作用，.css（'；显示'；，'；块'；）起作用，但不能同时起作用

我有一个奇怪的问题。我有这个：

<div id="tstbtn" style="width:10px; height:10px; background-color:green;"></div>
<div id="dvDRKN">
    <div id="dvPopup">
        <asp:DropDownList ID="ddlDDL" runat="server">
            <asp:ListItem Text="Test" />
        </asp:DropDownList>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click', function (event) {
            if (!$(event.target).closest('#dvPopup').length) {
                $('#dvDRKN').css('display', 'none');
            }
        });

        $('#tstbtn').on('click', function () {
            $('#dvDRKN').css('display', 'block');
        });
    });
</script>

<style type="text/css">
    #dvDRKN
    {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.6);
        position: fixed;
        display:none;
    }
    #dvPopup
    {
        position: fixed;
        padding: 20px 15px;
        background-color: white;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
</style>

这很有效。

---

我还测试了输入

$（'#dvDRKN'）.css（'display'，'block'）直接在控制台中，这也可以使用。但是当我把两者放在一起时，什么也没有发生。
Add
返回false
以防止它冒泡到父事件，父事件切换您不希望发生的
div的状态

  <script type="text/javascript">
        $(document).ready(function () {
            $(document).on('click', function (event) {
                if (!$(event.target).closest('#dvPopup').length) {
                    $('#dvDRKN').css('display', 'none');
                }
            });

            $('#tstbtn').on('click', function () {
                $('#dvDRKN').css('display', 'block');
                return false;
            });
        });
    </script>


$（文档）.ready（函数（）{
$（文档）。在（'单击'）上，函数（事件）{
if（！$（event.target）.closest（'#dvPopup'）.length）{
$（'#dvDRKN'）.css（'display'，'none'）；
}
});
$（'#tstbtn'）。在（'click'，函数（）{
$（'#dvDRKN'）.css（'display'，'block'）；
返回false；
});
});
添加
返回false
以防止它冒泡到父事件，父事件切换您不希望发生的
div的状态

  <script type="text/javascript">
        $(document).ready(function () {
            $(document).on('click', function (event) {
                if (!$(event.target).closest('#dvPopup').length) {
                    $('#dvDRKN').css('display', 'none');
                }
            });

            $('#tstbtn').on('click', function () {
                $('#dvDRKN').css('display', 'block');
                return false;
            });
        });
    </script>


$（文档）.ready（函数（）{
$（文档）。在（'单击'）上，函数（事件）{
if（！$（event.target）.closest（'#dvPopup'）.length）{
$（'#dvDRKN'）.css（'display'，'none'）；
}
});
$（'#tstbtn'）。在（'click'，函数（）{
$（'#dvDRKN'）.css（'display'，'block'）；
返回false；
});
});
您使用母版页吗？如果是这样，元素的
ID
已更改。检查元素，您将看到它。此代码似乎工作正常：这是因为
\tstbtn
是
\dvPopup
的子元素，然后单击事件气泡。。。因此，如果单击
#tstbtn
，绑定到
文档
级别的单击事件也会触发，并且也达到了条件，因此…在
$（'#dvDRKN'）.css（'display'，'block'）之后添加
return false
，@MelanciaUK-Nope。元素ID保持不变。是否使用母版页？如果是这样，元素的
ID
已更改。检查元素，您将看到它。此代码似乎工作正常：这是因为
\tstbtn
是
\dvPopup
的子元素，然后单击事件气泡。。。因此，如果单击
#tstbtn
，绑定到
文档
级别的单击事件也会触发，并且也达到了条件，因此…在
$（'#dvDRKN'）.css（'display'，'block'）之后添加
return false
，@MelanciaUK-Nope。元素ID保持不变。