為什么此圖像滑塊在模式中不起作用？

Question

模態打開時，我正在顯示圖像滑塊/轉盤。 但是，當我單擊圖像時，滑塊不會顯示。 該代碼是使用javascript生成的，然后由php頁面呈現。

我正在從服務器端發送JSON對象。 我得到它沒有任何錯誤。 在該JSON對象中，我獲得了3張要顯示在滑塊中的圖像。 任何圖像可能都是空白。 這是我所做的：

displayData += '<div class="well well-sm" id="'+gotData.profile_id+'" style="width:180px;height:150px;background:#ccccff;display:block;float:left; border:1px solid black;padding: 5px;margin: 5px 5px 5px 5px;"';
displayData += '<p><b>'+gotData.first_name+'</b></p>';

if(gotData.img == "" && gotData.img2 == "" && gotData.img3 == ""){
displayData += '<p class="ethumbnail"> <img class="img-responsive" alt="Some image" src="images/no-image-found.png"  width="100" height="100" border=""/></p>';

displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="images/no-image-found.png"  width="200" height="200" border=""/></p>';
} else{

displayData += '<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">';
                                displayData += '<div class="carousel-inner">';

                                if(gotData.img != "" || gotData.img != undefined){
                                    displayData += '<p class="ethumbnail"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img+'"  width="100" height="100" border=""/></p>';

    displayData += '<div class="item active">';
    displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img+'"  width="100" height="100" border=""/></p>';
    displayData += '</div>';
    } else {} 

    if(gotData.img2 != "" || gotData.img2 != undefined){
        displayData += '<div class="item">';
        displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img2+'"  width="100" height="100" border=""/></p>';
        displayData += '</div>';
    } else {}

    if(gotData.img3 != "" || gotData.img3 != undefined){
        displayData += '<div class="item">';
        displayData += '<p class="hidden"> <img class="img-responsive" alt="Some image" src="data:image/jpeg;base64,'+gotData.img3+'"  width="100" height="100" border=""/></p>';
        displayData += '</div>';                                    
    } else {}

    displayData += '</div>';
    displayData += '<a class="left carousel-control hidden" href="#carousel-example-generic" role="button" data-slide="prev">';
    displayData += '<span class="glyphicon glyphicon-chevron-left"></span>';
    displayData += '</a>';
    displayData += '<a class="right carousel-control hidden" href="#carousel-example-generic" role="button" data-slide="next">';
    displayData += '<span class="glyphicon glyphicon-chevron-right"></span>';
    displayData += '</a>';
    displayData += '</div>';
}

$('#content').html(displayData);//replacing img with data




$('body').on('click','div.well.well-sm',function(){
        var list = $(this);
        $('#myModal .modal-title').html('Profile Information');
        $('#myModal .modal-body').html(list.html());
        $('#myModal .modal-body p').removeClass('hidden');
        $('#myModal .modal-body p.ethumbnail').remove();
        $('#myModal').modal('show');
    });

Answer 1

我相信您在顯示如下模態后需要調用$('.carousel').carousel()

$('body').on('click','div.well.well-sm',function(){
    var list = $(this);
    $('#myModal .modal-title').html('Profile Information');
    $('#myModal .modal-body').html(list.html());
    $('#myModal .modal-body p').removeClass('hidden');
    $('#myModal .modal-body p.ethumbnail').remove();
    $('#myModal').modal('show');
    $('.carousel').carousel()
});