在我对投资组合进行排序后，Bootstrap 模式停止工作 [英] Bootstrap modal stops working after I sort portfolio

问题描述

我正在使用 quicksand.js 构建一个可排序的投资组合，以显示有关单击的更多信息我正在使用 bootbox.js，现在它运行良好，但我最近遇到了一个问题.当您对作品集进行排序时，bootbox 不再起作用！

你可以在这里看到它的实际效果，滚动到投资组合部分，然后单击其中一张图像以查看它是否正常工作.然后排序并重试，你会看到我的问题.

更新: 使用控制台我发现了导致问题的原因，但我无法完全理解错误，我不得不一度使用 jquery migrate 来制作流沙功能，这是问题.这是错误:

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

这是我的 javascript:

 函数库(){$('#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 sat amet, consectetur adipiscing elit. 整数 a elit turpis.Phasellus non varius mi. Nam bibendum in sollicitudin lacinia 的毛里斯.$('#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 sat amet, consectetur adipiscing elit. 整数 a elitturpis. Phasellus non varius mi. Nam bibendum 在 sollicitudin lacinia 的毛里斯.$('#print1').click(function() { bootbox.alert('<h4>steampuxk co.</h4><hr><p class="subtitle"><em>Branding</h4><hr>;/em></p><img src="img/projects/print1.jpg"><p class="project-description">Lorem ipsum dolor sat amet, consectetur adipiscing elit. 整数 a elitturpis. Phasellus non varius mi. Nam bibendum 在 sollicitudin lacinia 的毛里斯.$('#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 sat amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum 在 sollicitudin lacinia 的毛里斯.$('#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 sat amet, consectetur adipiscing elit.Integer a elit turpis.Phasellusnon varius mi. Nam bibendum in sollicitudin lacinia 的毛里斯.$('#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 sat amet, consectetur adipiscing elit.Integer a elit turpis.Phasellusnon varius mi. Nam bibendum in sollicitudin lacinia 的毛里斯.$('#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 sat amet, consectetur adipiscing elit.Integer a elit turpis.Phasellusnon varius mi. Nam bibendum in sollicitudin lacinia 的毛里斯.$('#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 sat amet, consectetur adipiscing elit.Integer a elit turpis.Phasellusnon varius mi. Nam bibendum in sollicitudin lacinia 的毛里斯.$('#web3').click(function() { bootbox.alert('<h4>火车站</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/web3.jpg"><p class="project-description">Lorem ipsum dolor sat amet, consectetur adipiscing elit. 整数 a elit turpis.Phasellus non varius mi. Nam bibendum in sollicitudin lacinia 的毛里斯.}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($过滤器，{持续时间:1000}，画廊);});$(文件).准备好(画廊)；

和我的 html:

<div class="容器组合"><!-- 页面标题--><div class="row page-title"><div class="col-lg-12"><h3>投资组合</h3><小时><p>我们还创造了一些其他的东西.</p>

<!-- 投资组合过滤器--><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">平面设计</a></li><li><a href="#" class="illustation">插图</a></li>

<!-- 投资组合项目--><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"><跨度><h4>海滩我</h4><em>品牌</em></span></span></a><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"><跨度><h4>克里斯·哈伯</h4><em>网页设计</em></span></span></a><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"><跨度><h4>Bildende</h4><em>打印</em></span></span></a><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"><跨度><h4>SK邀请赛</h4><em>品牌</em></span></span></a><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"><跨度><h4>Magz Killa</h4><em>打印</em></span></span></a><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"><跨度><h4>Synex</h4><em>品牌</em></span></span></a><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"><跨度><h4>牛</h4><em>网页设计</em></span></span></a><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"><跨度><h4>Tehc9btcxh</h4><em>打印</em></span></span></a><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"><跨度><h4>信息手册</h4><em>品牌</em></span></span></a>