Question

我有一个名为＆＃34; MyDiv＆＃34;的div。单击此div时，将显示一个覆盖图，其中包含＆＃34; MyDiv_subDiv＆＃34;追加。当用户点击叠加层时，视图应该消失，但如果点击了＆＃34; MyDiv_subDiv＆＃34;则不会消失。

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

＆＃13;

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();
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

问题是：它只适用于＆＃34; MyDiv＆＃34;是第一次点击。当叠加层关闭时，＆＃34; MyDiv＆＃34;单击第二次，然后单击＆＃34; MyDiv_subDiv＆＃34;它消失了 - 它不应该！

感谢任何帮助！

Answer 1

来自jquery.empty

为了避免内存泄漏，jQuery删除了其他构造，如数据   和删除之前来自子元素的事件处理程序   元素本身。

如果要删除元素而不破坏其数据或事件   处理程序（以便以后可以重新添加），请改用.detach（）。

所以你必须使用.detach来保存活动。

由于.detach适用于自我，而不适用于儿童，因此您必须更改

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

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

＆＃13;

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();
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

关闭叠加除了＆＃34;特殊＆＃34;使用jQuery / Javascript单击Div

1 个答案: