Quicksand.js, мешающий модулю Bootstrap

Question

Я пытался создать портфолио лайтбокса, используя функции Bootstrap Modal, с плагином для сортировки по зырям. Я изначально следовал за this tutorial, с которым мне пришлось немного поработать, чтобы работать в Bootstrap 3.0.0 (версия, которую я использую), но она работала. Я решил, что мне нужен больше контроля над модальными блоками, поэтому я достал подключаемый модуль bootbox и просто использовал модальные js, которые входят в bootstrap. Теперь, когда я нажимаю эскиз, модальный флажок всплывает нормально, но если я нажму одну из кнопок навигации по сортировке, появится окно с последним изображением, которое было в модальном (не правильном), или если первое вы делаете сортировку, затем нажмите, модальный флажок появляется, но он пуст. Учебник упомянул о проблеме и обходным:.

«Неотъемлемо, Quicksand обнуляются модальную функцию Bootstrap как скоро , как вы взаимодействовать с какой-либо из категорий То есть, модальное работает перед обжигом Quicksand, но но после этого мы легко избежали этой проблемы, указав ранее нашу функцию Bootbox. Как показано выше, мы тогда использовали «галерею» в качестве атрибута внутри функции quicksand() и установили $ (document) .ready (галерея). Теперь модальная работа будет работать как ожидалось как до, так и после выбора фильтра/категории. "

но, похоже, он не работает с обычным бутстрапом. Единственным подобным вопросом, который я смог найти, является this one, ответ заключался в том, чтобы добавить обратный вызов, поскольку объекты, отсортированные по зыбучим пескам, фактически являются новыми объектами, на которые не повлиял модальный скрипт, но когда я добавил обратный вызов, Работа.

вот мой код (я оставил все другие эскизы)

<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, поэтому пытаетесь привязать событие click к элементам, которые не находятся на странице все же, чтобы установить привязку к элементу, который находится всегда на странице, то используйте переменную «setClickAttr» для Selector фильтра

т.е. изменить

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

в

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

Это Turning live() into on() in jQuery подробнее о привязке к элементам, которые должны быть вначале