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> 
... 

Answer 2

什么可能发生的触发的$（文件）。在事件之间的竞争条件$（“body”）事件。 这会导致弹出窗口中的.hidden div在getJSON回调完成时尚未填充。

我建议改变你的代码如下，以防止这种“竞态条件”：

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

     renderPopup(); 
     $.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 */ 
var renderPopup = 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> 

或者，你很可能也只是追加此到原始代码，这也将在JSON请求准备好之前填充对话框：

// show the modal 
$(function(){ 
    $("#modal-gallery").modal("hide"); 
}); 

Answer 3

我想这是因为进行模态出现之前的画廊是准备好了，试试这个。

<script> 
$(function() { 
    $(\'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>