Quicksand.js干扰Bootstrap Modals

Question

我一直在尝试使用Bootstrap Modal功能和流沙分类插件制作lightbox组合。我最初遵循this tutorial，我不得不在Bootstrap 3.0.0（我正在使用的版本）中工作，但它工作。我决定我需要更多的控制模式盒，所以我拿出bootbox插件，并使用引导程序中的模态js。现在，当我按下缩略图时，模式框弹出正常，但如果按下其中一个排序导航按钮，该框将弹出模式中的最后一幅图像（不是正确的）或者第一个你做的是排序然后点击，模态框弹出，但它是空的。本教程中提到的问题和解决方法：。

“本质上，流沙会尽快废止引导的模式功能 你与任何类型的互动也就是说，模态发射流沙之前的作品 ，但我们之前通过定义我们的Bootbox函数很容易地避免了这个问题 然后，我们在quicksand（）函数 和setup $（document）.ready（）中使用“gallery”作为属性。 gallery）;现在，在选择过滤器/类别之前和之后，模态将按预期 工作。“

但它似乎没有与正常的bootstrap模式一起使用。我能找到的唯一类似的问题是this one，答案是添加一个回调函数，因为按quicksand排序的对象实际上是没有受模态脚本影响的新对象，但是当我添加回调函数时，它没有工作。

这里是我的代码（我离开了所有其他的缩略图）

<div class="container well well-lg"> 
<ul class="filter nav nav-pills"> 
    <li data-value="all"><a href="#"><h6>All</h6></a></li> 
    <li data-value="Historical"><a href="#"><h6>Historical</h6></a></li> 
    ... 
</ul> 

<hr> 
<ul class="thumbnails"> 
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" data-id="id-1" data-type="Historical"> 
     <a class="thumbnail" data-toggle="modal" data-target="#myModal" id="joan1" href="#" data-image-id="" data-title="Joan of Arc" data-caption="Digital, Junior Thesis subject Crime and Punishment, 2015" data-image="/images/joan1.png"> 
      <img alt="" src="/images/thumb_joan1.png"></a> 
    </li> 
    ... 
</ul> 

</div> 

<!-- Modal --> 
<div class="modal modal-wide fade" id="myModal" role="dialog"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h3 class="modal-title" id="myModal-title"></h3> 
     </div> 
     <div class="modal-body"> 
      <img id="myModal-image" class="img-responsive" src=""> 
     </div> 
     <div class="modal-footer"> 
      <div class="col-md-2"> 
       <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button> 
      </div> 

      <div class="col-md-8 text-justify" id="myModal-caption"> 

      </div> 

      <div class="col-md-2"> 
       <button type="button" id="show-next-image" class="btn btn-default">Next</button> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

，这里是我的javascript

<script src="/Scripts/jquery.quicksand.js" type="text/javascript"></script> 

<script> 

    $(document).ready(function() { 

     loadGallery(true, 'a.thumbnail'); 

     $(".modal-wide").on("show.bs.modal", function() { 
      var height = $(window).height() - 200; 
      $(this).find(".modal-body").css("max-height", height); 
     }); 

     function disableButtons(counter_max, counter_current) { 

      $('#show-previous-image, #show-next-image').show(); 
      if (counter_max == counter_current) { 
       $('#show-next-image').hide(); 
      } else if (counter_current == 1) { 
       $('#show-previous-image').hide(); 
      } 
     } 

     function loadGallery(setIDs, setClickAttr) { 
      var current_image, 
       selector, 
       counter = 0; 

      $('#show-next-image, #show-previous-image').click(function() { 
       if ($(this).attr('id') == 'show-previous-image') { 
        current_image--; 
       } else { 
        current_image++; 
       } 

       selector = $('[data-image-id="' + current_image + '"]'); 
       updateGallery(selector); 
      }); 

      function updateGallery(selector) { 
       var $sel = selector; 
       current_image = $sel.data('image-id'); 
       $('#myModal-caption').text($sel.data('caption')); 
       $('#myModal-title').text($sel.data('title')); 
       $('#myModal-image').attr('src', $sel.data('image')); 
       disableButtons(counter, $sel.data('image-id')); 
      } 

      if (setIDs == true) { 
       $('[data-image-id]').each(function() { 
        counter++; 
        $(this).attr('data-image-id', counter); 
       }); 
      } 
      $(setClickAttr).on('click', function() { 
       updateGallery($(this)); 
      }); 
     }; 


     function gallery() { 

     } 
     var $itemsHolder = $('ul.thumbnails'); 
     var $itemsClone = $itemsHolder.clone(); 
     var $filterClass = ""; 
     $('ul.filter li').click(function (e) { 
      e.preventDefault(); 
      $filterClass = $(this).attr('data-value'); 
      if ($filterClass == 'all') { var $filters =    $itemsClone.find('li'); } 
      else { var $filters = $itemsClone.find('li[data-type=' + $filterClass + ']'); } 
      $itemsHolder.quicksand(
       $filters, 
       { duration: 1000 }, 
       loadGallery 
      ); 
     }); 
    }); 
    $holder.quicksand($filteredData, { 
     duration: 800, 
     easing: 'easeInOutQuad' 
    }, gallery); 
    $(document).ready(gallery); 
</script> 

这里是live page在这里你可以看到这个问题。我对此很新，希望我只是搞砸了一些基本的和可修复的东西。预先感谢任何帮助！

Answer 1

嗨你的缩略图点击事件过滤后，不会触发过滤时，你正在创建一个元素的克隆，并将它们添加回到DOM，因此，你尝试绑定一个单击事件的元素不在页面上然而，要解决结合这始终是在页面上，然后用你的可变元素“setClickAttr”为选择滤波

即改变

$(setClickAttr).on('click', function() { 
    .... 
}); 

到

$(document).on('click', setClickAttr, function() { 
    .... 
}); 

This Turning live() into on() in jQuery更多关于绑定到必须先存在的元素