CODEWITHSUNDEEP
jquery
DextrousDave
DextrousDave

Reputation: 6793

jQuery .empty() overwrites .appendTo()

I have an Image modal popup that is filled with a single image by a jQuery function.

This popup displays when you click on any thumbnail (I have a thumbnail image gallery) to enlarged the image. The enlarged image will popup in the modal.

Here is how I call it:

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

The problem is that the 

.empty()

overwrites the 

.appendTo()

function.

Why is that? I mean the appendTo runs after the empty. The reason why I use .empty() is to have one image in the modal at the time and prevents build-up.

Upvotes: 0

Views: 238

Answers (1)

JJJ
JJJ

Reputation: 33163

Change .appendTo('#imageModal #imageHolder') to .appendTo('#imageModal'). The imageModal element has just been emptied so it can't contain an element with the id imageHolder.

Upvotes: 1

Related Questions