jQuery selector возвращает пусто

Question

Я разрабатываю модальное окно, которое отображается с помощью 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(); 
}); 

Вот codepen пример вопроса: http://codepen.io/sanderfish/pen/QyzERM

Что происходит, когда var modalWindow = $("#window"); остается комментировал в openModal, возвращает селектор пуст. Код работает при раскомментировании, но только для одного модального (в данном случае это pandaModal).

Заранее спасибо.

Answer 1

Обнаружили, как решить проблему сегодня и, следовательно, написать ее в качестве ответа.

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

визуализации после того, как переменная modalWindow была объявлена ​​в pandaModal. Я узнал, что код действительно работал, когда я объявил переменную после функции html() выше.

Я переписал свой код следующим образом. Сначала я объявил мои переменные:

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

Тогда я написал функцию .on click, чтобы объявить html, что должно быть сгенерировано, чтобы объявить modalWindow, который живет внутри, чтобы быть оказана html и запустить функцию 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'); 
     } 
    }); 

}