私は流砂を使って自分のウェブサイトにクールな並べ替えを追加しています。
http://razorjack.net/quicksand/docs-and-demos.html#examples
しかし、データ（コンテンツ）を複製して並べ替えると、クリックイベントが失われるという問題があります。
私のウェブサイトはandrewsimonmcallister.tvで、私が話しているのはビデオセクションです。何かが足りない場合は、できるだけ多くの情報を提供するように努めます。
これがHTMLセクションです
<ul id="videolist">
<li data-id="1" data-type="tv" class="videoitem">
<div name="video" class="video shadow"><img src="images/video/planetoftheapemen.jpg" border=0><videotitle>TV Series : Planet of the Apemen</videotitle><p>Clip from the National TV series produced by the BBC 'Planet of the Apemen: Battle for Earth'. This is the opening scene as we sweep over the mountains and see the tribes men tracking their kill. The cue is big and sweeping to match the imagery with a ostinato combined with a sweeping string melody.</p><a href="#videoplayer" class="fancybox" name="playvideo" rel="planetoftheapemen/mountain"><div class="watch"></div></a></div>
<default>1</default>
<date>98</date>
<sorttype>TV</sorttype>
</li>
<li data-id="2" data-type="film" class="videoitem">
<div class="video"><img src="images/video/macropolisend.jpg" border=0><videotitle>Film : Macropolis</videotitle><p>Macropolis is a stop animation film produced by Flickerpix and directed by Joel Simon. In this particular scene our main protagonists finally get acceptance as a small boy buys them and takes them home. This is the final scene for the movie.</p><a href="#videoplayer" id="playvideo1" class="fancybox" rel="macropolis/ending"><div class="watch"></div></a></div>
<default>2</default>
<date>97</date>
<sorttype>FILM</sorttype>
</li>
<li data-id="3" data-type="scoring" class="videoitem">
<div class="video"><img src="images/video/orchestra.jpg" border=0><videotitle>Scoring Session : Looking Glass</videotitle><p>Live recording session for the very delicate Looking Glass cue, taken from the drama of the same name. This cue features English Horn, Harp, Piano and Strings.</p><a href="#videoplayer" id="playvideo2" class="fancybox" rel="scoring/lookingglass"><div class="watch"></div></a></div>
<default>3</default>
<date>99</date>
<sorttype>ZSCORING</sorttype>
</li>
<li data-id="4" data-type="scoring" class="videoitem">
<div class="video"><img src="images/video/brass-section.jpg" border=0><videotitle>Scoring Session : Family Retreat</videotitle><p>Recording from a live scoring session for the title track to the movie Family Retreat. It's big, fun and light hearted.</p><a href="#videoplayer" id="playvideo3" class="fancybox" rel="scoring/familyretreat"><div class="watch"></div></a></div>
<default>4</default>
<date>100</date>
<sorttype>ZSCORING</sorttype>
</li>
</ul>
ビデオリンクのクリックイベントで、データ/コンテンツのクローンを作成します
$("#open-videos").click(function(){
console.log("Inside video");
$(currentSection).hide();
$("#video-player").hide();
$("#contentbg").fadeIn();
$("#videos").fadeIn();
$filterType = $('input[name="type"]');
$filterSort = $('input[name="sort"]');
console.log("videos is " + $videos);
if ($videos== null) {
console.log("setting videos");
$videos = $("#videolist");
}
$videosdata = $videos.clone();
currentSection = "#videos";
});
各divのタグにクリックイベントがあり、ファンシーボックスが起動する前に再生するビデオを基本的に設定します
$("a[id^='playvideo']").click(function(e){
var videoselected = $(this).attr('rel');
console.log("Clicked on link, rel value is " + videoselected);
$("#jquery_jplayer_9").jPlayer({
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "../js",
supplied: "m4v",
cssSelectorAncestor: "#jp_container_9"
});
console.log("setting media to video/" + videoselected + ".m4v");
$("#jquery_jplayer_9").jPlayer( "setMedia", {
m4v: "video/" + videoselected + ".m4v"
});
console.log("Try and play now!");
});
このイベントは、上部のラジオボタンの1つをクリックして、並べ替えを実行するまで機能します。その後、イベントは失われます。
これがソートコードです
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) { return a.text(); }
};
$.extend(options, customOptions);
$data = $(this);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};
})(jQuery);
ご覧のとおり、コンソールログを追加して、発生している場所を示しています。Javaコンソールを開くと、イベントが失われていることがわかります。
完全にデモするには、Webサイトにアクセスし、ビデオメニュー項目をクリックします。次に、アペメンビデオの最初の惑星をクリックすると、コンソールのログが表示され、ビデオが再生されます。次に、[日付で並べ替え]をクリックします。たとえばマクロポリスをクリックしてください。今回はエベットが発射されておらず、ビデオはエイプメンの惑星で立ち往生しています。ただし、もう一度Webサイトにアクセスした場合は、ビデオセクションに移動し、並べ替えを行わずに各ビデオをクリックするだけで、<a>イベントが常に発生し、機能することがわかります。