我正在使用 quicksand.js 构建一个可排序的投资组合，以显示更多点击信息我正在使用 bootbox.js，现在这工作得很好，但我最近遇到了一个问题。当您对投资组合进行排序时，bootbox 不再起作用！
您可以在此处查看此操作，滚动到投资组合部分并单击其中一张图片以查看其正常运行。然后对其进行排序并重试，您将看到我的问题。
更新： 使用控制台我找到了导致问题的原因，但我无法完全理解错误，我不得不在某一时刻使用 jquery migrate 来制作流沙功能，这是问题的一部分。这是错误：
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 -->
如果有人可以看一下，我对此没有任何运气。