Come mostrare l'immagine dopo aver fatto clic sull'immagine in modale?

Question

mio codice HTML è simile a questo:

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

      </div> 
      <div class="modal-body"> 


      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

mio codice JavaScript è come questo:

<script type="text/javascript"> 

    htmlData = ''; 
    htmlData = 'Photos<a href="#" id="hotel_photo" data-hotel-code="nases">(Click to View)</a><br><br>'; 
    htmlData += '<div class="imageHotel"></div>'; 

    $('#myModal').find('.modal-body').html(htmlData); 

    $(".imageHotel").hide(); 
    $(document).on("click", "#hotel_photo", function(event){ 
     $(".imageHotel").toggle(); 
     event.preventDefault(); 
     htmlData += '<div id="gallery_hotel">'; 

      htmlData = '<img id="largeImage" src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg" />'; 

     htmlData += '</div>'; 


     htmlData += '<div id="thumbs_hotel">'; 

      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" />'; 
      htmlData += '<img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" />'; 

     htmlData += '</div>'; 

     $('.imageHotel').html(htmlData); 

    }); 


    $('#thumbs_hotel').delegate('img','click', function(){ 
               // alert('tes'); 
     $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 

    }); 

</script> 

Demo è come questo: https://jsfiddle.net/oscar11/10td0yww/1/

Quando scatto l'immagine nell'elenco delle immagini, l'immagine non è cambiata. Sebbene io già chiami id hotel thumb.

Quando non utilizzo il modale. Funziona

Quando uso il modale. Non funziona

Qualche soluzione per risolvere il mio problema?

La ringrazio molto

Answer 1

Siete sulla percorso corretto di utilizzare l'approccio-eventi delegati per gli elementi generati in modo dinamico. Tuttavia, si dovrebbe associare il utilizzando .on() invece di .delegate()

Come di jQuery 1.7, .delegate() è stata sostituita con il metodo .on(),

Quando si associa l'uso evento imageHotel come genitore statica containeras si sta sostituendo completamente thumbs_hotel elemento.

$('.imageHotel').on('click', '#thumbs_hotel img', function() { 
    $('#largeImage').prop('src', this.src.replace('thumb', 'large')); 
}); 

Answer 2

si dovrebbe spostare il

$('#thumbs_hotel').delegate('img','click', function(){ 
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
}); 

all'interno del $(document).on("click") perché l'evento non è rilegato in dom recentemente aggiunto

working fiddle

Answer 3

Ecco aggiornamento il tuo violino

DEMO

Fare uso di questo

// bind the click event 
     $('#thumbs_hotel').off().on('click', 'img', function() { 
      console.log($(this).attr('src')); 
      $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
     }); 

metterlo dentro l'evento click quando l'inserimento delle immagini sul pop dal "Clicca per visualizzare"

Answer 4

Utilizzare questa

$('body').on('click', '#thumbs_hotel img', function() { 
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large')); 
}); 

Sotto elenca quale versione si dovrebbe usare

$ (selettore) .live (eventi, dati, gestore); // jQuery 1.3+

$ (documento) .delegate (selettore, eventi, dati, gestore); // jQuery 1.4.3+

$ (documento). On (eventi, selettore, dati, gestore); // jQuery 1.7+