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更多關於綁定到必須先存在的元素