问题
I am building a sortable portfolio using quicksand.js, to display more information on click I am using bootbox.js, now this is working pretty well but I recently ran into an issue. When you sort the portfolio bootbox not longer works!
You can see this in action here, scroll to the portfolio section and click one of the images to see it function correctly. Then sort it and try again and you will see my issue.
Update: Using console I found what is causing the issue but I cant fully understand the error, I had to use jquery migrate at one point to make quicksand function and that is part of the issue. Here is the error:
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
Here is my 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);
and my 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 -->
I havent had any luck with this if anyone could take look.
回答1:
UPDATED: I saw that the quicksand plugin allows for a callback function.
I believe what's happening here is the elements are losing their event handlers when they get sorted due to the elements being cloned and the gallery() function only being called on (document).ready. The elements that display after being sorted are 'new' and have not got an event listener attached.
In portfolio.js, try calling the gallery() function after sorting the items via the quicksand callback argument
...
// call quicksand and assign transition parameters
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
}, gallery);
...
Also, I see that you have gallery as the callback in the code you posted here, but I don't think that's the code that is running. I think portfolio.js is what's running to do the sorting.
来源：https://stackoverflow.com/questions/22542944/bootstrap-modal-stops-working-after-i-sort-portfolio