Question

Quick rundown – I’m adding a class of ‘checked’ to image elements when a user clicks on them.
Clicking my ‘Next’ button hides the ‘choose-photos’ div and shows the confirm div, injecting in the selected photos, like so:

$('.next').click(function () {
  $('.user-photos').attr('id', 'step-two');
  $('.choose-photos').hide();
  var selected = $('.checked').get();
  $('.confirm-batch').show().html(selected);
}
});

The .get() method is working quite well; however, if you click to back to step 1 and choose new photos, whichever photos you’ve selected are gone from the DOM.

$('.choose').click(function (){
 $('.user-photos').attr('id', 'step-one');
 $('.confirm-batch').hide().html('');
 $('.choose-photos').show();
}

});

Is there a way to get those ‘checked’ items back in the ‘choose’ div without reloading the page? Basically just resetting the process.

Answer 1

jQuery overloads some of its methods with stupid behavior.

One example is that it allows this…

var selected = $('.checked').get();
$('.confirm-batch').show().html(selected);

It looks like you’re inserting an HTML string rendered from the selected elements, but you’re not, it’s reloacting them, as you normally would with DOM nodes.

As a solution, you could either clone them, or better, just put them back where you found them instead of destroying them with .html('')