javascript - 关闭叠加层，除非使用 jQuery/Javascript 单击 "special"Div

Question

我有一个名为“MyDiv”的 div。单击此 div 时，会显示一个叠加层，并附加一个“MyDiv_subDiv”。当用户点击叠加层时， View 应该消失，但如果用户点击“MyDiv_subDiv”则不会。

我在这里发现了一个类似的问题并尝试了一下，这是我的代码:

var $MyDiv = $('#MyDiv');
var $overlay = $('<div id="overlay"></div>');
var $MyDiv_subDiv = $('<div id="MyDiv_subDiv" class="subDiv">\n\
<div class="subDivContent">\n\
<div class="subDivContent">\n\
<p>some content</p>\n\
</div>\n\
</div>\n\
</div>');

//Add overlay
$("body").append($overlay);

//When overlay is clicked
$overlay.click(function () {
    //Hide the overlay
    $overlay.hide();
    $overlay.empty();
});

$MyDiv.click(function (event) {
    event.preventDefault();
    $overlay.show();
    $overlay.append($MyDiv_subDiv);
});

$MyDiv_subDiv.click(function (event) {
    event.stopPropagation();
});

#overlay {
    background:rgba(0,0,0,0.7);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
    text-align:center;
}

.subDiv{
    width: 400px;
    height: 125px;
    margin: 0 auto;
    
}

#MyDiv_subDiv{
    background-color: lightgreen;
}

#MyDiv{
    width: 185px;
    height: 80px;
    background-color: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MyDiv">
Click to show MyDiv_SubDiv
</div>

问题是:它只在第一次点击“MyDiv”时有效。当覆盖关闭并第二次单击“MyDiv”然后单击“MyDiv_subDiv”时，它会消失 - 它不应该!

感谢任何帮助!

Answer 1

来自 jquery.empty

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use .detach() instead.

所以你必须使用.detach来保留事件。

因为 .detach 是应用于自身，而不是 child ，你必须改变

$overlay.empty(); 到 $MyDiv_subDiv.detach(); 或 $overlay.children().detach();

或者您可以在每次将事件附加到 $overlay 时重新绑定(bind)该事件。

var $MyDiv = $('#MyDiv');
var $overlay = $('<div id="overlay"></div>');
var $MyDiv_subDiv = $('<div id="MyDiv_subDiv" class="subDiv">\n\
<div class="subDivContent">\n\
<div class="subDivContent">\n\
<p>some content</p>\n\
</div>\n\
</div>\n\
</div>');

//Add overlay
$("body").append($overlay);

//When overlay is clicked
$overlay.click(function () {
    //Hide the overlay
    $overlay.hide();
    $overlay.children().detach();
});

$MyDiv.click(function (event) {
    event.preventDefault();
    $overlay.show();
    $overlay.append($MyDiv_subDiv);
});

$MyDiv_subDiv.click(function (event) {
    event.stopPropagation();
});

#overlay {
    background:rgba(0,0,0,0.7);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
    text-align:center;
}

.subDiv{
    width: 400px;
    height: 125px;
    margin: 0 auto;
    
}

#MyDiv_subDiv{
    background-color: lightgreen;
}

#MyDiv{
    width: 185px;
    height: 80px;
    background-color: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MyDiv">
Click to show MyDiv_SubDiv
</div>