Javascript jQuery选择器返回空

我正在开发一个模式窗口，在单击按钮时使用

html（）

呈现，在窗口外单击时使用

remove（）

删除模式

我试图使这段代码可用于多模式窗口。我声明了一个全局变量

modalWindow

，它应该定义是否单击了窗口

这是我的代码：

var modalContent;
var modalContainer = $("#modal-container");
var modalWindow = modalWindow;
var body = $('body');

function pandaModal() {
  modalContent = "<div id='modal'><div id='window'></div></div></div>";
  modalWindow = $('#window');
  openModal();
}

function openModal() {
  modalContainer.html(function() {
    return modalContent;
  });
  var modal = $("#modal");
  body.addClass('noscroll');
  //var modalWindow = $("#window");
  console.log(modalWindow, ' before click');
  $(modalContainer).mouseup(function(e) {
    if (e.target.id != modalWindow.attr('id') && !modalWindow.has(e.target).length) {
      modal.remove();
      body.removeClass('noscroll');
      console.log(modalWindow, ' after click');
    }
  })
}
$(document).keyup(function(e) {
  if (e.which == 27) {
    $("#modal").remove();
    body.removeClass('noscroll');
  }
  e.stopPropagation();
});
$("body").delegate('#counter', 'click', function() {
  pandaModal();
});

var-modalContent；
var modalContainer=$（“模态容器”）；
var modalWindow=modalWindow；
变量body=$（'body'）；
函数pandaModal（）{
modalContent=“”；
modalWindow=$（'窗口'）；
openModal（）；
}
函数openModal（）{
html（函数（）{
返回modalContent；
});
var模态=$（“#模态”）；
body.addClass（'noscroll'）；
//var modalWindow=$（“#window”）；
log（modalWindow，“单击前”）；
$（modalContainer）.mouseup（函数（e）{
if（e.target.id！=modalWindow.attr（'id'）&&！modalWindow.has（e.target.length）{
modal.remove（）；
body.removeClass（'noscroll'）；
log（modalWindow，“单击后”）；
}
})
}
$（文档）.keyup（函数（e）{
如果（e.which==27）{
$（“#模态”）.remove（）；
body.removeClass（'noscroll'）；
}
e、 停止传播（）；
});
$（“body”）.delegate（“#计数器”，“单击”，函数（）{
潘达莫达尔（）；
});

以下是该问题的代码笔示例：

当

var modalWindow=$（“#window”）在
openmodel
中保留注释，选择器返回空。代码在未注释时工作，但仅适用于一种模式（在本例中为
pandaModal
）

提前感谢。
今天找到了解决问题的方法，因此将其作为答案写下来

modalContainer.html(function() {
    return modalContent;
});

在
pandaModal
中声明变量
modalWindow
后渲染。当我在上面的
html（）
函数之后声明变量时，我发现代码确实有效

我重写了我的代码如下。首先，我声明了我的变量：

var modalContent;
var modalContainer = $("#modal-wrapper");
var body = $('body');
var modalWindow;

然后我编写了
。单击
函数，声明应该呈现的
html
，声明位于要呈现的
html
中的
modalWindow
，并启动
openModal
函数。这看起来像这样：

$("#counter").on('click', function() {
    modalContent = "<div id='modal'><div id='window'></div></div>";
    modalWindow = $("#window");
    openModal();
    return false;
});

modalWindow=modalWindow的用途是什么？为什么modalWindow声明为全局变量，然后在函数openModal中再次声明？我想创建多个modal，如
pandaModal
，每个modal都包含不同的
modalContent
s，这些modalWindows返回多个
modalWindows
s
modalWindow
不应在OpenModel中再次声明，它这样做只是为了显示我想要实现的目标和出错的地方。您的代码有多个错误。例如，modalContent中的额外结束div标记。然而，更严重的问题是，代码试图在创建对象之前选择对象，例如，modalWindow=$（“#window”）似乎是在之后的语句中创建的。我不确定确切的问题，但我猜这是问题的一部分。谢谢你的回答！我认为错误的发生是因为在codepen中重建了问题，至少额外的结束div标记被删除了。我尝试了很多东西，包括你的建议。我现在已经删除了modalWindow的创建，并且只声明变量，而不是过早地分配它。这还没有解决问题。你还有别的想法吗？
function openModal() {

    $("#modal-wrapper").html(modalContent);
    var modal = $("#modal");
    var modalWindow = modal.children('div');

    body.addClass('noscroll');
    modal.center();

    $(modalContainer).mouseup(function(e) {
        if(e.target.id != modalWindow.attr('id') && !modalWindow.has(e.target).length) {
            modal.remove();
            body.removeClass('noscroll');
        }
    });

}