Bootstrap modal перестает работать после сортировки портфолио

Question

Я создаю сортируемое портфолио, используя quicksand.js, чтобы отображать больше информации о клике. Я использую bootbox.js, теперь это работает очень хорошо, но я недавно столкнулся с проблемой. Когда вы сортируете портфолио, портфолио больше не работает!

You can see this in action here, перейдите в раздел портфолио и щелкните по одному из изображений, чтобы увидеть, как он функционирует правильно. Затем выполните сортировку и повторите попытку, и вы увидите мою проблему.

Update:Использование консоли я нашел то, что вызывает проблемы, но я не могу полностью понять ошибку, я должен был использовать JQuery мигрировать в одной точке, чтобы сделать Quicksand функцию и является частью проблемы. Здесь ошибка:

console.trace()      jquery-migrate-1.2.1.js:43 
migrateWarn       jquery-migrate-1.2.1.js:43 
Object.defineProperty.get    jquery-migrate-1.2.1.js:58 
$.fn.quicksand       jquery.quicksand.js:34 
(anonymous function)     portfolio.js:36 
jQuery.event.dispatch     jquery-1.9.1.js:3074 
elemData.handle      jquery-1.9.1.js:2750 

Вот мой JavaScript:

function gallery(){ 
     $('#branding1').click(function() { bootbox.alert('<h4>Beach Me</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/branding1.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); }); 
     $('#web1').click(function() { bootbox.alert('<h4>Cloud INC.</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/web1.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); }); 
     $('#print1').click(function() { bootbox.alert('<h4>steampuxk co.</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/print1.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); }); 
     $('#branding2').click(function() { bootbox.alert('<h4>Life is Grand</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/branding2.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); }); 
     $('#print2').click(function() { bootbox.alert('<h4>Snapshot</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/print2.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); }); 
     $('#branding3').click(function() { bootbox.alert('<h4>Cityscape</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/branding3.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); }); 
     $('#web2').click(function() { bootbox.alert('<h4>Details</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/web2.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); }); 
     $('#print3').click(function() { bootbox.alert('<h4>SunnyDay</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/print3.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); }); 
     $('#web3').click(function() { bootbox.alert('<h4>Train Station</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/web3.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); }); 
    } 
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 }, 
     gallery 
    ); 
}); 
$(document).ready(gallery); 

и мой HTML:

<!-- Begin Portfolio --> 
<section id="section2"> 

    <div class="container portfolio"> 

     <!-- Page Title --> 
     <div class="row page-title"> 
      <div class="col-lg-12"> 
       <h3>Portfolio</h3> 
       <hr> 
       <p>We also create some other stuff.</p> 
      </div> 
     </div> 

     <!-- Portfolio Filter --> 
     <div class="container text-center"> 
      <ul id="filterOptions" class="filter nav nav-pills center-pills"> 
      <li class="active"><a href="#" class="all">all</a></li> 
      <li><a href="#" class="print">print</a></li> 
      <li><a href="#" class="web">web</a></li> 
      <li><a href="#" class="branding">branding</a></li> 
      <li><a href="#" class="apps">apps</a></li> 
      <li><a href="#" class="graphic design">graphic design</a></li> 
      <li><a href="#" class="illustation">illustration</a></li> 
      </ul> 
     </div> 

     <!-- Portfolio Items --> 
     <div class="row"> 
      <ul class="ourHolder no-padding"> 
      <li class="item col-lg-4 no-padding" data-id="id-1" data-type="branding"> 
       <a href="javascript:void(0);" id="branding1"> 
        <img src="img/projects/thumbs/branding1.jpg" alt="..." /> 
        <span class="portfolio-hover"> 
         <span> 
         <h4>Beach Me</h4> 
         <em>Branding</em> 
         </span> 
        </span> 
       </a> 
      </li> 
      <li class="item col-lg-4 no-padding" data-id="id-2" data-type="web"> 
       <a href="javascript:void(0);" id="web1"> 
        <img src="img/projects/thumbs/web1.jpg" alt="..." /> 
        <span class="portfolio-hover"> 
         <span> 
         <h4>Chris Harbour</h4> 
         <em>Web Design</em> 
         </span> 
        </span> 
       </a> 
      </li> 
      <li class="item col-lg-4 no-padding" data-id="id-3" data-type="print"> 
       <a href="javascript:void(0);" id="print1"> 
        <img src="img/projects/thumbs/print1.jpg" alt="..." /> 
        <span class="portfolio-hover"> 
         <span> 
         <h4>Bildende</h4> 
         <em>Print</em> 
         </span> 
        </span> 
       </a> 
      </li> 
      <li class="item col-lg-4 no-padding" data-id="id-4" data-type="branding"> 
       <a href="javascript:void(0);" id="branding2"> 
        <img src="img/projects/thumbs/branding2.jpg" alt="..." /> 
        <span class="portfolio-hover"> 
         <span> 
         <h4>SK Invitational</h4> 
         <em>Branding</em> 
         </span> 
        </span> 
       </a> 
      </li> 
      <li class="item col-lg-4 no-padding" data-id="id-5" data-type="print"> 
       <a href="javascript:void(0);" id="print2"> 
        <img src="img/projects/thumbs/print2.jpg" alt="..." /> 
        <span class="portfolio-hover"> 
         <span> 
         <h4>Magz Killa</h4> 
         <em>Print</em> 
         </span> 
        </span> 
       </a> 
      </li> 
      <li class="item col-lg-4 no-padding" data-id="id-6" data-type="branding"> 
       <a href="javascript:void(0);" id="branding3"> 
        <img src="img/projects/thumbs/branding3.jpg" alt="..." /> 
        <span class="portfolio-hover"> 
         <span> 
         <h4>Synex</h4> 
         <em>Branding</em> 
         </span> 
        </span> 
       </a> 
      </li> 
      <li class="item col-lg-4 no-padding" data-id="id-7" data-type="web"> 
       <a href="javascript:void(0);" id="web2"> 
        <img src="img/projects/thumbs/web2.jpg" alt="..." /> 
        <span class="portfolio-hover"> 
         <span> 
         <h4>Cow</h4> 
         <em>Web Design</em> 
         </span> 
        </span> 
       </a> 
      </li> 
      <li class="item col-lg-4 no-padding" data-id="id-8" data-type="print"> 
       <a href="javascript:void(0);" id="print3"> 
        <img src="img/projects/thumbs/print3.jpg" alt="..." /> 
        <span class="portfolio-hover"> 
         <span> 
         <h4>Tehc9btcxh</h4> 
         <em>Print</em> 
         </span> 
        </span> 
       </a> 
      </li> 
      <li class="item col-lg-4 no-padding" data-id="id-9" data-type="web"> 
       <a href="javascript:void(0);" id="web3"> 
        <img src="img/projects/thumbs/web3.jpg" alt="..." /> 
        <span class="portfolio-hover"> 
         <span> 
         <h4>Infobook</h4> 
         <em>Branding</em> 
         </span> 
        </span> 
       </a> 
      </li> 
      </ul> 
     </div> 

    </div> 

</section> 
<!-- End Portfolio --> 

Я нету везло с этим, если кто-то может принять вид.

Answer 1

ОБНОВЛЕНО: я видел, что плагин quicksand позволяет выполнять функцию обратного вызова.

Я считаю, что здесь происходит то, что элементы теряют свои обработчики событий, когда их сортируют из-за клонированных элементов, а функция gallery() вызывается только на (document).ready. Элементы, отображаемые после сортировки, являются «новыми» и не подключены к прослушивателю событий.

В portfolio.js, попробуйте вызвать функцию gallery() после сортировки элементов с помощью зыбучего обратного вызова аргумента

... 

// call quicksand and assign transition parameters 
$holder.quicksand($filteredData, { 
    duration: 800, 
    easing: 'easeInOutQuad' 
}, gallery); 

... 

Кроме того, я вижу, что у вас есть галерея в качестве обратного вызова в коде, который размещен здесь, но я не думайте, что это код, который работает. Я думаю, что портфолио. Js - это то, что выполняется для сортировки.