关闭覆盖，除非if "special"使用jQuery/Javascript单击Div

close overlay except if "special" Div is clicked with jQuery/Javascript

本文关键字：quot jQuery Javascript 单击 Div 使用 special if 除非 覆盖      更新时间：2023-09-26

我有一个名为"MyDiv"的div。当这个div被点击时，会显示一个附加了"MyDiv_subDiv"的叠加。当用户点击叠加视图应该消失，但不如果用户点击"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"它消失了-它不应该!

任何帮助都是感激的!

From jquery.empty

为了避免内存泄漏，jQuery删除了数据等其他结构的子元素中的事件处理程序

元素本身。

如果你想删除元素而不破坏它们的数据或事件处理程序(以便以后可以重新添加)，使用.detach()代替。

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

由于.detach适用于self，而不是child，所以必须更改

$overlay.empty(); to $MyDiv_subDiv.detach(); or $overlay.children().detach();

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

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>

相关文章：