ajax返回数据后在<ul>之后添加<li>标签无法显示

Question

ajax方法

 function ajax(prodNo){
        var json = {"prodNo":prodNo};
        $.ajax({
        type:"POST",
        url:"product_ajax",
        data:json,
        success:function(data){
                $("#prodName").html(data.product.name+" "+data.product.color+" "+data.product.prodNo);
                $("#prodPrice").html("￥"+data.product.price);
                $("#prodDescription").html(data.product.description);
                $("#images").html("");
                $.each(data.images, function(i, image){
                var item = "<li><a href='"+image.imgBig+"'><img src='"+image.imgSmall+"' /></a></li>";
                    $("#images").append(item); //拼接标签
                    $("#images").listview("refresh"); //刷新列表
                    $("#images").trigger("create");  //重新加载样式
            });
        }
    }); 
}

对图片显示的JQ代码（是否有可能是JQ控制的结果）

 $(document).ready(function() {
        // Exposure product image gallery
        $(function(){
                var gallery = $('#images');
                gallery.exposure({controlsTarget : '#controls',
                    imageControls : false,
                    controls : { prevNext : false, pageNumbers : false, firstLast : false },
                    pageSize : 5,
                    enableSlideshow: false,
                    showCaptions: false,
                    slideshowControlsTarget : '#slideshow',
                    onThumb : function(thumb) {
                        var li = thumb.parents('li');               
                        var fadeTo = li.hasClass($.exposure.activeThumbClass) ? 1 : 0.7;

                        thumb.css({display : 'none', opacity : fadeTo}).stop().fadeIn(200);

                        thumb.hover(function() { 
                            thumb.fadeTo('fast',1); 
                        }, function() { 
                            li.not('.' + $.exposure.activeThumbClass).children('img').fadeTo('fast', 0.7); 
                        });
                    },
                    onImageHoverOver : function() {
                        if (gallery.imageHasData()) {                       
                            // Show image data as an overlay when image is hovered.
                            gallery.dataElement.stop().show().animate({bottom:0+'px'},{queue:false,duration:160});
                        }
                    },
                    onImageHoverOut : function() {
                        // Slide down the image data.
                        var imageDataBottom = -gallery.dataElement.outerHeight();
                        gallery.dataElement.stop().show().animate({bottom:imageDataBottom+'px'},{queue:false,duration:160});
                    },
                    onImage : function(image, imageData, thumb) {
                        var w = gallery.wrapper;

                        // Fade out the previous image.
                        image.siblings('.' + $.exposure.lastImageClass).stop().fadeOut(500, function() {
                            $(this).remove();
                        });

                        // Fade in the current image.
                        image.hide().stop().fadeIn(500);

                        // Setup hovering for the image data container.
                        imageData.hover(function() {
                            // Trigger mouse enter event for wrapper element.
                            w.trigger('mouseenter');
                        }, function() {
                            // Trigger mouse leave event for wrapper element.
                            w.trigger('mouseleave');
                        });

                        // Check if wrapper is hovered.
                        var hovered = w.hasClass($.exposure.imageHoverClass);                       
                        if (hovered) {
                            if (gallery.imageHasData()) {
                                gallery.onImageHoverOver();
                            } else {
                                gallery.onImageHoverOut();
                            }   
                        }

                        if (gallery.showThumbs && thumb && thumb.length) {
                            thumb.parents('li').siblings().children('img.' + $.exposure.selectedImageClass).stop().fadeTo(200, 0.7, function() { $(this).removeClass($.exposure.selectedImageClass); });            
                            thumb.fadeTo('fast', 1).addClass($.exposure.selectedImageClass);
                        }
                    }
                });
            });
        // Exposure end

body部分

 <div id="container">
    <div id="content">
        <div class="content-inner">     
            <div class="main-content">      
                <div class="detail-item">           
                    <!-- Product Gallery Begin -->
                    <div class="product-gallery float-left">
                        <div id="exposure"></div>
                        <div class="panel"> 
                            <div id="controls"></div>               
                            <div id="slideshow"></div>
                            <ul id="images">
                            <c:if test='${map.images!="[]"}'>
                                <c:forEach items="${map.images}" var="image">
                                    <li><a href="${image.imgBig}"><img src="${image.imgSmall}" /></a></li>
                                </c:forEach>
                            </c:if>
                            </ul>
                        </div>  
                    </div>
                </div>  
            </div>      
        </div>
    </div>
</div>

Answer 1

ajax异步的，你的插件已经初始化好ui了在添加没用，除非这个插件有监控原始内容更改自动更新ui的功能（一般不会提供这种监控功能）。

自己看插件的api是否提供有动态添加图片功能，而不是直接往原来的dom对象添加内容，基本上90%以上无效，插件不会更新ui