我正在使用quicksand.js构建一个可排序的投资组合,以显示点击上的更多信息,我使用bootbox.js,现在这工作得很好,但我最近遇到了一个问题。当你对作品集进行排序时,引导框不再工作!
您可以在这里看到它的作用,滚动到投资组合部分并单击其中一个图像来查看它是否正常工作。然后将其排序并再试一次,您将看到我的问题。
Update: 使用控制台我发现了导致问题的原因,但我不能完全理解错误,我不得不使用jquery迁移在一点上使流沙功能,这是问题的一部分。下面是错误:
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 -->
如果有人能帮我看一下,我还没有找到。
更新:我看到流沙插件允许回调函数。
我相信这里发生的事情是元素正在失去他们的事件处理程序,当他们得到排序时,由于元素被克隆和gallery()
函数只在(document).ready
上被调用。排序后显示的元素是'new'并且没有附加事件侦听器。
在portfolio.js中,通过quicksand回调参数对项目进行排序后,尝试调用gallery()
函数
...
// call quicksand and assign transition parameters
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
}, gallery);
...
另外,我看到你在这里发布的代码中有画廊作为回调,但我不认为这是正在运行的代码。我想portfolio.js是用来排序的