javascript - Framework 7 swipebox无法在Cordova Android应用程序中显示附加图像

<img src="img/banner2.png" alt="image" class="col-100">

1.以上代码以行显示图像。当使用静态链接以及使用Jquery附加html时，效果很好。

<a href="img/banner2.png" rel="gallery-1"  class="swipebox col-33" title="My Caption"></a>

2.单击图像时，（图像滑块开始）图像放大并且可以左右互换以查看其他图像。
对于静态代码，滑块工作正常，但对于追加代码图像，则无法放大，滑块有时也无法工作。

下面的HTML代码

      <div class="gallery row" >
      <div id="gallery1" class="gallery row no-gutter ">
              <a href="http://192.168.0.104/upload/gallery/3.jpg-22-2017-07-24-15-04:36:15pm.jpg" rel="gallery-1" class="swipebox col-33" title="My Caption"> <img src="http://192.168.0.104/catking/upload/gallery/3.jpg-22-2017-07-24-15-04:36:15pm.jpg" alt="image" class="col-100"> </a>

              <a href="img/banner2.png" rel="gallery-1"  class="swipebox col-33" title="My Caption"> <img src="img/banner2.png" alt="image" class="col-100"> </a>

              <a href="img/banner3.png"  rel="gallery-1"  class="swipebox col-33" title="My Caption"> <img src="img/banner3.png" alt="image" class="col-100"> </a>

              <a href="img/banner4.png"  rel="gallery-1"  class="swipebox col-33" title="My Caption"> <img src="img/banner4.png" alt="image" class="col-100"> </a>

              <a href="img/banner2.png"  rel="gallery-1"  class="swipebox col-33" title="My Caption"> <img src="img/banner2.png" alt="image" class="col-100"> </a>

              <a href="img/banner1.png"  rel="gallery-1"  class="swipebox col-33" title="My Caption"> <img src="img/banner1.png" alt="image" class="col-100"> </a>

              <a href="img/banner2.png"  rel="gallery-1"  class="swipebox col-33" title="My Caption"> <img src="img/banner2.png" alt="image" class="col-100"> </a>

              <a href="img/banner3.png"  rel="gallery-1"  class="swipebox col-33" title="My Caption"> <img src="img/banner3.png" alt="image" class="col-100"> </a>

              <a href="img/banner4.png"  rel="gallery-1"  class="swipebox col-33" title="My Caption"> <img src="img/banner4.png" alt="image" class="col-100"> </a>
    </div>
  </div>

JavaScript附加代码

myApp.onPageInit('gallery', function (page) {


    var gallery = "infrastructure";
    var url="http://192.168.0.104/app/processApp.php?callback=?";

    var dataString="gallery="+gallery+"&fetchGallery=";

            $.ajax({
            type: "POST",
            url: url,
            data: dataString,
            crossDomain: true,
            cache: false,
            beforeSend: function(){ $("#login").html('Connecting...');},
            success: function(json){

            var bigdata = JSON.parse(json);

            var row = '';
            $.each(JSON.parse(json), function(i, d) {

                $.each(d, function(j, e) {

                    if(j == 'gallery_image') {

                    row+='<a href="http://192.168.0.104/upload/gallery/'+e+'" rel="gallery-1" class="swipebox col-33" title="My Caption"> <img src="http://192.168.0.104/upload/gallery/'+e+'" alt="image" class="col-100"> </a>';

                    }

                });


            });

            $('#gallery1').append(row);


            }

            });


 $('.swipebox' ).swipebox();

});

最佳答案

在添加内容之前会触发Swipebox。

放

$('.swipebox' ).swipebox();

在ajax成功结束时，因为您要添加动态内容。