Я использую quicksand, чтобы добавить классную сортировку на мой сайт.
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 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";
});
У меня есть событие click на теге на каждом 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!");
});
Это событие работает, пока вы не нажмете на один из переключателей вверху и не выполните сортировку. Затем событие теряется.
Вот код сортировки
(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, вы увидите, что событие становится потерянным.
Чтобы полностью демонтировать сайт, нажмите на пункт меню видео. Затем нажмите на первую планету видеофрагмента, вы увидите, как ведется запись в консоль, и видео будет воспроизводиться. Затем нажмите сортировку по дате. Нажмите, скажем, макрополис, на этот раз никаких обстрелов нет, и видео застряло на планете apemen. Но если вы снова попадете на сайт, зайдите в раздел видео и просто нажмите на каждое видео без какой-либо сортировки, вы можете видеть, что событие <a> всегда срабатывает, и оно работает.
