javascript - 为什么此图像 slider 在模式中不起作用？

Question

当模式打开时，我显示图像 slider /轮播。但是，当我单击图像时， slider 不会显示。该代码使用 javascript 生成，然后由 php 页面呈现。

我正在从服务器端发送一个 JSON 对象。我得到它没有任何错误。 在该 JSON 对象中，我得到了 3 张图像，我想将它们显示在 slider 中。任何图像都可能是空白的。 这是我所做的:

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()
});