jQuery .append()

Question

Это, возможно, неэлегантный способ сделать это, но ... Я создаю свой собственный сценарий окна окна с помощью jQuery - для обучения больше, чем что-либо еще.

С помощью этого скрипта:

$(document).ready(function() { 
    $(".popout").hide(); 
    $(".modal-links a").each(function(i){ 
     $(this).click(function(){ 
     $("body").append('<div class="overlay"></div>') 
     $(".popout").append('<a class="close" href="#">Close</a>') 
     var modal = $(".popout").eq(i), 
      modalWidth = modal.width(), 
      modalHeight = modal.height(); 
     modal.css({ 
      "width":modalWidth, 
      "height":modalHeight, 
      "margin-left":-(modalWidth/2)}) 
      .show().siblings(".popout").hide(); 
     }); 
    }); 
    $(".close").click(function(){ 
     $(".popout").hide(); 
     $(".overlay").hide(); 
    }); 
}); 

Я могу добавить якорную ссылку с классом .close. Это работает, когда я рассматриваю источник, он помещается в разметку, как мне бы хотелось. Однако в следующей функции я пытаюсь настроить этот добавленный класс и использовать событие click, чтобы вызвать скрытие модального окна и его наложение в фоновом режиме. Это не работает. Тем не менее, если я просто скопирую разметку a class="close" в свою фактическую разметку (без JS), она закрывается при нажатии. Есть идеи?

Answer 1

Похоже, что вам нужен метод .live(). Поскольку ваш якорь с классом close создается только после того, как click встречается на якоре modal-links, jQuery не может подключить его к событию document.ready.

Редактировать, поправка: Метод .live обходит это путем присоединения события к корню дерева DOM, который проверяет, соответствует ли целевой элемент указанным селекторам, и затем выполняет соответствующую функцию.

$('.close').live('click', function() { 
     $(".popout").hide(); 
     $(".overlay").hide(); 
}); 

Answer 2

вам необходимо либо добавить обработчик щелчка при создании тесной связи, или делегировать обработчик щелчка как функции в live щелчка.

Что происходит, так это то, что ваш селектор $('.close').click(... не выбирает никаких элементов, так как ссылка еще не существует.

EDIT добавить:

исправление было бы изменить его $('.close').live('click', function...

Элементы приложенном асинхронно.