jQuery .empty() перезаписывает .appendTo()

Question

У меня есть модальное всплывающее изображение, которое заполняется одним изображением функцией jQuery.

Это всплывающее окно отображается, когда вы нажимаете на любое уменьшенное изображение (у меня есть галерея уменьшенных изображений), чтобы увеличить изображение. Увеличенное изображение появится в модальном режиме.

Вот как я это называю:

$('#articleFeatured').click(function (e) { 
    e.preventDefault(); 
    $('#imageModal').show(500); 
    $('#imageModal').empty(); //empty modal to prevent clogging/build-up/duplicates 
    $('#articleFeatured img').clone().appendTo('#imageModal #imageHolder'); 
    //imageModal Close Button Functionality 
    $('#close_button').click(function() { 
     $('#imageModal').hide(500); 
    }); 
}); 

Проблема заключается в том, что

.empty() 

переписывает функцию

.appendTo() 

.

Почему? Я имею в виду appendTo пробегает после пустого. Причина, по которой я использую .empty(), состоит в том, чтобы иметь одно изображение в модальном состоянии в то время и предотвращать нарастание.

Answer 1

Изменение .appendTo('#imageModal #imageHolder') по .appendTo('#imageModal'). Элемент imageModal только что был опустошен, поэтому он не может содержать элемент с идентификатором imageHolder.