jQuery 选择器 returns 空

Question

我正在开发一个模态 window，它在单击按钮时使用 html() 呈现，并在使用 remove() 在 window 外部单击时删除模态。

我正在努力使这段代码可重用于多模式windows。我声明了一个全局变量 modalWindow，它应该定义 window 是否被点击。

这是我的代码：

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

这是该问题的代码笔示例：http://codepen.io/sanderfish/pen/QyzERM

当 var modalWindow = $("#window"); 在 openModal 中保持注释时，选择器 returns 为空。该代码在未注释时有效，但仅适用于一种模式（在本例中为 pandaModal）。

提前致谢。

Answer 1

今天找到了解决问题的方法，因此将其写为答案。

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

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

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

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

然后我写了 .on click 函数，声明应该渲染的 html，声明位于要渲染的 html 中的 modalWindow 和启动 openModal 函数。这看起来像这样：

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

然后是渲染模态和关闭函数的函数。

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

}

jQuery 选择器 returns 空

jQuery selector returns empty

javascript

jquery

global-variables

jquery-selectors