jquery append function is not working

Question

Я пытаюсь добавить div и промежуток к изображению на клик, а затем удалять его по клику.

<div id="gallery" align="center">  

     <img src="http://www.frontpagejunky.com/wp-content/uploads/2011/05.jpg" class="img-view" width="150px" height="150px" /> 
</div> 

JQuery:

  $(document).ready(function(){ 
       $('.img-view').click(function(){ 
        var img=$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>").clone(); 
        $('#gallery').append(img); 
       }); 

      $('#close').live("click",function(){ 
       $('#pop-up').remove(); 
        $('#close').remove(); 

      }); 

     }); 
    </script> 

Проблема, которую я имею, что продолжительность не получить завернутые в DIV, но только образ делает, а пролет добавляется только после того, как изображение завернуто. Вторая проблема - когда я нажимаю #close, div и кнопка исчезают, но когда я снова нажимаю на .img-view, они не регенерируются/не появляются. почему это происходит?

UPDATE

 $(document).ready(function(){ 
       $('.img-view').click(function(){ 
        var img=$(this).clone(); 
        img= img.after('<span class="close">X Close</span>'); 
        img=img.wrap("<div class='pop-up' style='display:block'/>"); 
        $('#gallery').append(img); 
       }); 

      $('.close').live("click",function(){ 
       $('.pop-up').remove(); 
        $('.close').remove(); 

      }); 

     }); 

Но теперь всплывающее DIV не обернуть элемент изображения!?!

Answer 1

Вы не можете использовать обертку на элемент, который не в йот. Вы можете либо создать новый элемент, который будет вашим оберткой, так и привязать все к этой оболочке или сначала вставить свой img в dom, а затем обернуть его.

Вы должны сделать что-либо из этих 2-й вариант, первым из которых лучше всего, прежде чем добавить промежуток с X.

Answer 2

Используйте этот один:

$('#gallery').append(img); 

Вместо:

$('#gallery').append($(img)); 

Answer 3

Ваше сцепление откусил,
$(this).after('<span id="close">X Close</span>') возвращает $(this) (который есть образ), так $(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>") обертывания DIV вокруг затем возвращается $(this),
$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>").clone() возвращает клон $ (this)

Это может помочь

$(document).ready(function(){ 
    $('.img-view').on('click', function(e){ 
     $("<div id='pop-up' style='display:block'/>").appendTo('#gallery').append('<span id="close">X Close</span>').find('#close').append(this);   
     event.stopPropagation(); 
    }); 
    $('#close').live("click",function(){ 
     $(this).find('.img-view').appendTo('#gallery'); 
     $(this).parent().remove(); 
    }); 
}); 

---

EDIT

Причина этого не работает потому, что обработчик нажмите на # Закрыть был называться, поскольку он стал родителем .img-зрения, предотвратить это я добавил stopPropagation(), также изменил код, поэтому текст X Close удален.

FIDDLE