Question

I’m trying to bring an ID from DOM back with a .replaceWith, even though I had already replaced it previously with a div containing an iframe first.

I know some will recommended toggle, or show, hide, but I’d rather not load each div on top of each other due to potential video on top of javascript slider at same time, which can get ugly for mobile browsing.

I’m using a click event for ‘done’ link which takes the user back to the javascript slideshow (slider-wrapper) where they began.

Cannot bring #slider-wrapper ID back from the dead after .replaceWith.

I’ve obviously tried:

    $('a.back').live('click', function(evt) {
       slider = $('#slider-wrapper') 
        $('div.item-container').replaceWith(slider);
        evt.preventDefault();

..and many other tricks but it does not want to come back after the first .replaceWith

On a side note

safari does not ‘hear’ the second click event for .replaceWIth, firefox does though

Any help would be very much appreciated!

$(window).load(function () {
    $('a.link').live('click', function(evt) {
        item = $('<div class="item-container"><iframe></iframe><a class="back">Done</a></div>');
        $('#slider-wrapper').replaceWith(item);
        evt.preventDefault();
    });

    $('a.back').live('click', function(evt) {

        $('div.item-container').replaceWith($('#slider-wrapper'));
        evt.preventDefault();       
    });
});

Answer 1

replaceWith will remove $('#slider-wrapper') from the DOM, so of course when “Done” is clicked, you can’t simply select it, because you’ve removed it.

You either have to hide it, store it elsewhere, or recreate it.

toggle works really well for things like this… why do you want to use replaceWith?

Here’s an example of using toggle, after, next, and remove: http://jsfiddle.net/QxyDf/