Я пытаюсь загрузить динамические изображения на модале начальной загрузки с помощью ajax, когда пользователь нажимает на разные ссылки на странице. Каждая ссылка имеет data-id , который используется для отображения соответствующего изображения в модальном теле. Он отлично работает для первой пары ссылок, но начинает плохо себя вести после 4-5 кликов. Позже он начинает показывать ранее загруженные изображения при нажатии на ссылку, и соответствующее изображение отображается через несколько секунд после запуска модального режима. Может кто-нибудь помочь мне, что я делаю не так с моим кодом ниже:
Мой код JS:
$(document).ready(function(){
$(document).on('click', '.viewPhoto', function(e){
e.preventDefault();
var pid = $(this).data('id'); // it will get id of clicked row
$("#photoContent").html("Please Wait...");
$.ajax({
url: "URL OF PAGE",
type: 'POST',
data: 'pid='+pid,
})
.done(function(data){
$('#photoContent').html(data); // load response
})
.fail(function(){
$('#photoContent ').html('Error');
});
});
});
А мой модальный HTML:
<div id="viewPhotoModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body" id="photoContent"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
А HTML-код ссылки:
<a href="#" data-toggle="modal" data-id="12345" class="viewPhoto" data-target="#viewPhotoModal">View Image</a>