u010764649 于 2016.09.14 16:56 提问
- ajax返回数据后在<ul>之后添加<li>标签无法显示
-
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>
-
-
showbo
2016.09.14 17:15
ajax异步的,你的插件已经初始化好ui了在添加没用,除非这个插件有监控原始内容更改自动更新ui的功能(一般不会提供这种监控功能)。
自己看插件的api是否提供有动态添加图片功能,而不是直接往原来的dom对象添加内容,基本上90%以上无效,插件不会更新ui
-
- u010764649 2016.09.14 20:06
ajax异步的,你的插件已经初始化好ui了在添加没用,除非这个插件有监控原始内容更改自动更新ui的功能(一般不会提供这种监控功能)。
自己看插件的api是否提供有动态添加图片功能,而不是直接往原来的dom对象添加内容,基本上90%以上无效,插件不会更新ui
那还有其他办法可以实现这个添加功能吗
-
- u011582965 2016.09.30 18:08
楼主找到解决方法了吗?求解,我也遇到这个问题。怎么搞??
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!