.on('click') 有效， .css('display','block') 有效，但不能一起使用答案

【问题标题】：.on('click') works, .css('display','block') works, but not together.on('click') 有效， .css('display','block') 有效，但不能一起使用
【发布时间】：2016-06-23 12:07:21
【问题描述】：

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

<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>

当我单击#tstbtn div 时，它应该显示#dvDRKN div，但它没有。

我已经测试了以下内容：

$('#tstbtn').on('click', function () {
        alert('test');
    });

而且效果很好。我还测试了直接在控制台中输入$('#dvDRKN').css('display', 'block');，这也有效。但是当我把两者放在一起时，什么都没有发生。

【问题讨论】：

你使用MasterPages吗？如果是这样，您的元素的 ID 已更改。检查元素，你会看到它。
这段代码似乎工作正常：jsfiddle.net/3nzxnb1g
那是因为#tstbtn 是#dvPopup 的子级并且点击事件冒泡......所以如果你点击#tstbtn，绑定到document 级别的点击事件也会被触发，并且条件也达到了，所以……
在$('#dvDRKN').css('display', 'block');之后添加return false，
@MelanciaUK 不。元素 ID 保持不变。

标签： javascript jquery css asp.net

【解决方案1】：

添加return 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>

【讨论】：