javascript - jquery附加图像然后将它们放入轮播中

Question

您好，我有一个按钮，可以在单击模式时触发，并将一些图像添加到应用作轮播的内容中。我不知道如何准确解释，所以我会给你一个我的问题的链接。我的脚本无法正常工作，因为它触发了模式，正在附加图像，但首先它触发了模式，因此它不会在轮播中显示图像。如果我关闭模式，然后再次按下按钮，图像就在那里。这是LINK WITH PROBLEM

按餐厅，然后按画廊即可查看问题。按图库两次。附加图像的脚本

<script>
$(\'body\').on(\'click\',\'.gal\',function(e){
  e.preventDefault();
   var href = $(this).attr(\'href\');
    $.getJSON(href, function(data) {

   $.each(data, function(key, val) {
    $(\'.hidden\').append(\' <div class="item" id="image-1"> <img class="gal img-responsive" title="Image 11" src="http://rezerv.city/clienti/carulcuflori/imagini/galerie/\' +val.poze + \'"></div> \');
});
     });
});
      </script>

模态和轮播的脚本，两者都是由同一个按钮触发

<script>
       /* activate the carousel */
$("#modal-carousel").carousel({interval:false});

/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function () {
  $(".modal-title").html($(this).find(".active img").attr("title"));
})

/* when clicking a thumbnail */
$(document).on("click", ".galz .gal", function() {

    var content = $(".carousel-inner");
    var title = $(".modal-title");

    content.empty();
    title.empty();

    var id = this.id;
    var repo = $("#img-repo .item");
    var repoCopy = repo.filter("#" + id).clone();
    var active = repoCopy.first();

    active.addClass("active");
    title.html(active.find("img").attr("title"));
    content.append(repoCopy);

    // show the modal
    $("#modal-gallery").modal("show");

 });
 </script>

Answer 1

http://jsfiddle.net/u5sok220/2/

您必须将类事件添加到第一项

<div class="item active"><img class="gal img-responsive" ... </div>
<div class="item"><img class="gal img-responsive" ... </div>
<div class="item"><img class="gal img-responsive" ... </div>
...