[英]how to show an image in another div after clicking the image in jquery
[英]How to show image after clicking the image in modal?
我的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">×</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>
演示是這樣的: https : //jsfiddle.net/oscar11/10td0yww/1/
單擊圖像列表中的圖像時,圖像未更改。 雖然我已經打電話給id thumb hotel了。
當我不使用模態。 它正在發揮作用
當我使用模態。 它不起作用
解決我的問題的任何解決方案?
非常感謝你
這是你小提琴的更新
利用這個
// 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'));
});
通過“點擊查看”將圖像插入彈出窗口時將其放入click事件中
用這個
$('body').on('click', '#thumbs_hotel img', function () {
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
});
下面列出了您應該使用的版本
$(selector).live(events,data,handler); // jQuery 1.3+
$(document).delegate(selector,events,data,handler); // jQuery 1.4.3+
$(document).on(事件,選擇器,數據,處理程序); // jQuery 1.7+
您正在使用委托事件方法來動態生成元素。 但是,您應該綁定使用.on()
而不是.delegate()
從jQuery 1.7開始,
.delegate()
已被.on()
方法取代,
當綁定事件使用imageHotel
作為父靜態容器時,您將完全替換thumbs_hotel
元素。
$('.imageHotel').on('click', '#thumbs_hotel img', function() {
$('#largeImage').prop('src', this.src.replace('thumb', 'large'));
});
你應該移動你的
$('#thumbs_hotel').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
在$(document).on("click")
因為事件沒有綁定在新附加的dom中
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.