javascript - 为什么这个弹出窗口会无缘无故地向 DOM 树添加多个覆盖 <div> ？

Question

我正在使用popup.js在弹出窗口中显示内容。但是，如果我执行基本示例，这就是我得到的:

您在这里看到的是包含一些无趣内容的弹出窗口，但您也可以看到 <div class="popup_cont" ..>已多次添加到 DOM 树中。结果是我必须点击(这里)7次才能摆脱弹出窗口。每次点击都会删除其中一个覆盖层..

我不知道为什么会发生这种情况。这就是我嵌入弹出窗口的方式:

<div id="btn-help" class="toy-button">
  <span lang="en">
    <a href="#inline" class="default_popup ignore_hash">HELP</a>
  </span>
</div>

这就是它的调用方式:

/**
 * Callback to display help window.
 * @private
 * @memberOf module:cpu-controlls_controller
 */
_onHelpButtonClicked = function() {     

    debug('cpu-controlls.controller _onHelpButtonClicked()');
    var options = { content : "hallo.html" };
    $('.default_popup').popup(options);
};

其中 hallo.html 只是一个包含大量“Hello World!”消息的 .html 文件。

知道如何解决这个问题吗？

Answer 1

似乎每次用户单击按钮时都会初始化弹出窗口插件，因此第一次它可以正常工作，但每次单击都会有越来越多的弹出窗口需要关闭。 将初始化放在 document.ready() 函数中，并放在点击处理程序之外。