javascript - lightSlider中的lightGallery-'onSliderLoad'的Slider.prepend()不起作用

我在onSliderLoad中使用lightslider的lighGallery。我的代码段中有两组代码。 jsfiddle

代码1：页面加载lightGallery视图。我直接从HTML渲染图像
代码2：Button-ButtonClick_LightGallery-单击lightGallery视图。通过前置渲染图像。


  我的问题：LightGallery在代码1中可以正常工作，但代码2却无法正常工作
  工作。

$(document).ready(function() {
  $('.demo').hide();
function BuildImageSlider() {
  $('.demo').show();
  var slider = $('#lightSlider').lightSlider({
                gallery:false,
                item:1,
                loop:true,
                thumbItem:9,
                slideMargin:0,
                enableDrag: false,
                currentPagerPosition:'left',
                onSliderLoad: function(el) {
                    el.lightGallery({
                        selector: '#lightSlider .lslide'
                    });
                }
            });

            var newEl = '<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">            <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />        </li><li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">            <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />';

         slider.prepend(newEl);
         slider.refresh();
           }


  $('#lightSlider-pageload').lightSlider({
                gallery:true,
                item:1,
                loop:true,
                thumbItem:9,
                slideMargin:0,
                enableDrag: false,
                currentPagerPosition:'left',
                onSliderLoad: function(el) {
                    el.lightGallery({
                        selector: '#lightSlider-pageload .lslide'
                    });
                }
            });


  $( "#refresh" ).click(function() {   BuildImageSlider(); });

  });

.lSAction > a {
    z-index: 99 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js"></script>
<link href="http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet"/>


<input type="button" id="refresh" value="ButtonClick_LightGallery"/>

<div class="demo">
    <ul id="lightSlider">
    </ul>
</div>

<div class="demo-pageload">
    <ul id="lightSlider-pageload">
      <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">            <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" /><li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg">            <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" /></li><li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg">            <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />        </li>
</ul>
</div>

最佳答案

问题已解决。请参考

$(document).ready(function() {
  $('.demo').hide();
function BuildImageSlider() {
      $('#lightSlider').empty();
    $(".lSPager").remove();
    $(".lSAction").empty();
  $('.demo').show();
  var sld=$('#lightSlider');
    var newEl = '<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">            <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />        </li><li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg" data-src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">            <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />';

         sld.prepend(newEl);
         //sld.refresh();
  var slider = $('#lightSlider').lightSlider({
                gallery:false,
                item:1,
                loop:true,
                thumbItem:9,
                slideMargin:0,
                enableDrag: false,
                currentPagerPosition:'left',
                onSliderLoad: function(el) {
                    el.lightGallery({
                        selector: '#lightSlider .lslide'
                    });
                }
            });


           }




  $( "#refresh" ).click(function() {   BuildImageSlider(); });

  });

.lSAction > a {
    z-index: 99 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js"></script>
<link href="http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet"/>


<input type="button" id="refresh" value="ButtonClick_LightGallery"/>

<div class="demo">
    <ul id="lightSlider">
    </ul>
</div>

<div class="demo-pageload">
    <ul id="lightSlider-pageload">

</ul>
</div>

关于javascript - lightSlider中的lightGallery-'onSliderLoad'的Slider.prepend()不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38816623/