Как показать изображение после нажатия на изображение в модальном?

Мой HTML код выглядит так:Как показать изображение после нажатия на изображение в модальном?

<!-- 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 -->

Мой Javascript код выглядит так:

<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 как это: https://jsfiddle.net/oscar11/10td0yww/1/

Когда я нажимаю изображение в списке изображений, изображение не изменилось. Хотя я уже звонил в номер большого пальца.

Когда я не использую модальный. Он работает

Когда я использую modal. Он не работает

Любое решение для решения моей проблемы?

Большое спасибо

источник

2016-04-13 moses toh

Я обновляю свой jsfiddle –

Вы на правильном пути использования делегированных-событий подхода для динамически создаваемых элементов. Тем не менее, Вы должны связать с помощью .on() вместо .delegate()

По состоянию на JQuery 1.7, .delegate() был заменен методом .on(),

При использовании связывания событий imageHotel в качестве родительских статического containeras вы полностью заменяющих thumbs_hotel элемент.

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

источник

2016-04-13 06:05:38 Satpal

Большое спасибо –

Мне нужна помощь. посмотрите здесь: http://stackoverflow.com/questions/37209847/how-to-send-parameter-json-array-when-modal-open –

вы должны двигаться

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

внутри $(document).on("click") потому что событие не переплетены в недавно добавленным йот

working fiddle

источник

2016-04-13 05:10:59 kiro112

я был попробовать. Но, он не работает –

@mosestoh см. Обновление .. добавлен скрипка – kiro112

Вот обновление ваша скрипка

DEMO

использования делают этот

// 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')); 
     });

Поместите его в случае щелчка при вставке изображений на поп в «Нажмите, чтобы посмотреть»

источник

2016-04-13 05:27:43

Большое спасибо –

Используйте этот

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

Ниже перечислены версии, которые вы должны использовать

$ (selector) .live (события, данные, обработчик); // jQuery 1.3+

$ (document) .delegate (селектор, события, данные, обработчик); // jQuery 1.4.3+

$ (document) .on (события, селектор, данные, обработчик); // JQuery 1.7+

источник

2016-04-13 05:31:31

Как показать изображение после нажатия на изображение в модальном?

ответ

Смежные вопросы