Javascript jquery追加图像，然后将它们放入旋转木马中

您好，我有一个按钮，点击一个模式并将一些图像添加到应该作为旋转木马工作的内容时触发。我不知道如何准确地解释，所以我会给你一个我的问题的链接。我的脚本没有正常工作，因为它触发了模式，正在附加图像，但首先它触发了模式，所以它不会在旋转木马中显示图像。如果我关闭模式，然后再次按下按钮，图像就会出现。 这是你的电话号码

按餐厅，然后按画廊查看问题。记者席两次。 附加图像的脚本

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

$（\'body\'）。在（\'click\'，\'.gal\'，函数（e）上{
e、 预防默认值（）；
var href=$（this.attr（\'href\'）；
$.getJSON（href，函数（数据）{
$。每个（数据、函数（键、值）{
$（\'.hidden\'）。追加（\'\'）；
});
});
});

模态和旋转木马的脚本，都是由同一个按钮触发的

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

/*启动旋转木马*/
$（“#模式转盘”）.carousel（{interval:false}）；
/*幻灯片更改时更改模式标题*/
$（“#模式转盘”）。在（“slided.bs.carousel”，函数（）{
$（“.modal title”）.html（$（this.find（“.active img”）.attr（“title”））；
})
/*单击缩略图时*/
$（document）.on（“click”，“.galz.gal”，function（））{
变量内容=$（“.carousel-inner”）；
变量标题=$（“.modal title”）；
content.empty（）；
title.empty（）；
var id=this.id；
var回购=$（“img回购项目”）；
var repopcopy=repo.filter（“#”+id.clone（）；
var active=repopcopy.first（）；
active.addClass（“active”）；
html（active.find（“img”）.attr（“title”）；
内容。追加（副本）；
//显示模态
美元（“#模态画廊”）。模态（“展览”）；
});

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

我建议如下更改您的代码，以防止这种“竞争条件”：

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

必须将活动类添加到第一项

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

---

我想这是因为在多媒体资料准备就绪之前出现了模态，试试这个

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


$（函数（）{
$（\'body\'）。在（\'click\'，\'.gal\'，函数（e）上{
e、 预防默认值（）；
var href=$（this.attr（\'href\'）；
$.getJSON（href，函数（数据）{
$。每个（数据、函数（键、值）{
$（\'.hidden\'）。追加（\'
\');
});
});
});
});
不工作，现在根本不显示图片。这是真的，它会在对话框填充后触发我的模态和旋转木马，但这并没有解决：（我尝试了你的JSIDdle，我认为这是正确的答案，但我不知道如何使它与链接中的外部附加数据一起工作，当我按下按钮时，我从带有json数据的链接中附加图像，我在左侧的true=false上得到无效的赋值。我的输入：first=false；。不要忘记var href=$（this.attr（'href'））；脚本现在正在运行，但我是否应该更改附加到.carousel-inner的类？如果需要，可以这样做。我在JSFIDLE中，请删除div.hidden
<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>
...

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