12
クイックサンドを使用して私のウェブサイトにクールなソートを追加しています。JQuery。Clone（）がクリックイベントを失う
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>
で、私はそのそれぞれのdiv上のタグのclickイベントを持っているデータ/コンテンツ
$("#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";
});
のクローンを作成しますファンシーボックスがキックする前に再生するビデオを設定します
$("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つでソートを実行します。その後、イベントは失われます。あなたは、私は物事がとても発射されている場合、あなたのJavaコンソールを開く場合は、イベントが迷子にされて見ることができます表示するには、コンソールロギングを追加している見ることができるようにここで
は、ソートコード
(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);
です。
ウェブサイトを完全にデモするには、ビデオメニュー項目をクリックしてください。次に、ビデオゲームの最初の惑星をクリックすると、コンソールログが表示され、ビデオが再生されます。次に、日付順にソートをクリックします。 say macropolisをクリックすると、エバートがこの時間を放ち、ビデオがapemenの惑星に詰まっていません。しかし、もう一度ウェブサイトにアクセスした場合は、動画のセクションに移動し、並べ替えなしで各動画をクリックすると、<a>イベントが常に発生して動作することがわかります。データとイベントとのため
これはJavaScriptであり、Javaではありません – Alexander