Bootstrap模式停止工作后，我排序投资组合
Bootstrap modal stops working after I sort portfolio
我正在使用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是用来排序的
相关文章：
- JavaScript数组排序(函数）用于对表行进行排序，而不是排序
- 使用promise和mongoose对文档进行排序
- Selectize.js:如何对整数值的选项进行排序
- Javascript排序的图像弹出窗口..可以't单独弹出
- 如何通过引用var Using DataTables来进行分页或排序
- 为什么HTML5拖放的目标是孩子?(可排序列表）
- AngularJs对所有页面中的所有记录进行排序
- 当属性不一致时，如何根据属性对JS对象列表进行排序
- 按从高到低对多个int变量进行排序
- jQuery UI可排序-多连接列表拖动
- Javascript排序字符串或数字
- 2个backbone.js集合，具有相同的模型，但排序顺序不同
- sort而不是排序javascript
- 通过从节点父级获取所有子级对节点进行排序(获取子级数组）
- 如何合并不同集合的游标并按日期排序
- 为什么我的JavaScript堆栈排序函数不起作用
- ui网格:在自定义表头模板中触发排序
- jquery Onclick函数带有导致双击的回调排序函数
- 如何创建多级可排序的投资组合
- Bootstrap模式停止工作后，我排序投资组合
