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

为什么此图像滑块在模态中不起作用？

1 个答案: