Bootstrap轮播图像滑块在ajax中不起作用

Question

bootstrap carousel图像滑块的代码工作正常，但是在ajax成功方法中动态实现了相同的代码。上一个和下一个按钮动作不起作用，这意味着图像没有滑动。

工作代码（jsp＆amp; ajax）：

    <div id="textAreaId">
        <textarea id="writingPad" rows="13" class="form-control" placeholder="Start writing your note here..."></textarea>
    </div>
    <div id="imageGallery" style="display: none;">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li> 
                <li data-target="#carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner"> 
                <div class="item active"> 
                    <div class="slide2"> 
                        <img src="<c:url value='/styles/images/2.png'/>"> 
                    </div> 
                </div> 
                <div class="item"> 
                    <div class="slide2"> 
                        <img src="<c:url value='/styles/images/2.png'/>"> 
                    </div> 
                </div> 
                <div class="item"> 
                    <div class="slide2"> 
                        <img src="<c:url value='/styles/images/2.png'/>"> 
                    </div> 
                </div> 
            </div>
            <div id="imageGalleryContents" class="">
            </div>
            <div id="imageNavigationControlDiv">
            </div>
            <a onclick="" href="#carousel" class="left carousel-control"  data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a onclick="" href="#carousel" class="right carousel-control"  data-slide="next"> 
                <span class="glyphicon glyphicon-chevron-right">
                </span>
            </a>
        </div>
    </div>


success: function(data, status, xhr) 
{
    $('#textAreaId').hide();
    $('#imageGallery').show();
}

不工作的代码（jsp＆amp; ajax）：

<div id="textAreaId">
    <textarea id="writingPad" rows="13" class="form-control" placeholder="Start writing your note here..."></textarea>
</div>                      
<div id="imageGallery" style="display: none;">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
        </ol>
        <div id="imageGalleryContents" class="">
        </div>                          
        <a onclick="" href="#carousel" class="left carousel-control"  data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a onclick="" href="#carousel" class="right carousel-control"  data-slide="next"> 
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

success: function(data, status, xhr) 
{
    $('#textAreaId').hide();
    $('#imageGallery').show();
    var imageFileCount = data.length;
    var count = 0;
    console.log("imageFileCount ====> " +imageFileCount);
    for( var indx = 1 ; indx < imageFileCount ; indx++ ) {
        $("#carousel ol li:last").after('<li data-target="#carousel" data-slide-to="'+indx+'"></li>');  
    }
    imageDivData = "<div class='carousel-inner'>";
    $.each(data, function(index, value) 
    {
        console.log("index =====> "+index);
        $.each(value, function(key, imageData) {
            console.log("key =====> "+key);
            if(key=="imageFilePath") {
                var imagePath = imageData;
                count = count + 1;
                if (count == 0 || count == 1) {
                    imageDivData += "<div class='item active'>"; 
                    imageDivData += "<div class='slide2'>";
                    imageDivData += "<img src='/example/styles/images/4.png' style=''>";
                    imageDivData += "</div>";
                    imageDivData += "</div>";
                    count = count + 1;
                } else {
                    imageDivData += "<div class='item'>"; 
                    imageDivData += "<div class='slide2'>";
                    imageDivData += "<img src='/example/styles/images/4.png' style=''> "; 

                    imageDivData += "</div>";
                    imageDivData += "</div>";
                    count = count + 1;
                }
            }
        });
    });
    imageDivData += "</div>";
    $("#imageGalleryContents").html(imageDivData);
}