Question

I am grabbing all images from the current DOM tree. I display them into my custom unify div and allow the user to select them.

var allImgs = $('img');

allImgs.each(function (index) {
    var imgUrl = $(this).attr("src");
    var newImgTag = $('<img></img>');
    newImgTag.attr("src", imgUrl);
    newImgTag.attr("width", "100px");
    newImgTag.attr("height", "100px");

    $("#Image-Grid").append(newImgTag);  // this works

    newImgTag.click(function (event) {
        $('#Selected-Image').empty();
        $('#Selected-Image').append(newImgTag);   // this doesn`t work why????
    });
});

I am able to get all image to display into my unify div.
however, when I select one picture from unify div. image will not display properly.

e.g I randomly pick a fashion site.
http://www.abercrombie.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10901&storeId=10051&langId=-1&categoryId=12266&parentCategoryId=%5bLjava.lang.String%3b%403dc73dc7&topCategoryId=12203&productId=1014475

When I select one of the pic, I notice that, the src link for the pic is something like this
/anf/50817/img/global/logo-print.png

Why can’t I display the picture later in the click event?

Answer 1

newImgTag.click(function (event) {
        $('#Selected-Image').empty();
        $(this).clone().appendTo('#Selected-Image');
});

Docs:

• http://api.jquery.com/clone/

---

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

(…) As shown in the discussion for .append(), normally when an element is inserted somewhere in the DOM, it is moved from its old location. So, given the code:

$('.hello').appendTo('.goodbye');

The resulting DOM structure would be:

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

To prevent this and instead create a copy of the element, you could write the following:

$('.hello').clone().appendTo('.goodbye');

This would produce:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>