Sto usando le sabbie mobili per aggiungere un po 'di ordinamento interessante al mio sito web.JQuery .Clone() perde l'evento click
http://razorjack.net/quicksand/docs-and-demos.html#examples
Ma io sto avendo un problema che quando ho clonare il mio dati (contenuto) per ordinare, gli eventi click si perdono.
Il mio sito Web è andrewsimonmcallister.tv, è la sezione video di cui sto parlando. Proverò a dare più informazioni possibili, se mi manca c'è solo da chiedere.
Ecco la sezione 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>
Sulla evento click per il link del video, clono i dati/contenuti
$("#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";
});
Ho un evento click sul tag su ogni div che stabilisce fondamentalmente quale video per giocare prima di calci casella di fantasia in
$("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!");
});
Questo evento funziona fino a quando si fa clic su su uno dei pulsanti radio nella parte superiore ed esegui un ordinamento. Quindi l'evento si perde.
Ecco il codice sorta
(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);
Come potete vedere ho aggiunto la registrazione della console per mostrare dove le cose stanno sparando in modo se si apre la console Java si può vedere l'evento è perdersi.
Per eseguire la demo completa, toccare il sito Web, fare clic sulla voce di menu video. Quindi fai clic sul primo pianeta del video degli apomeni, puoi vedere la registrazione della console e il video verrà riprodotto. Quindi fare clic su Ordina per data. Fai clic su say macropolis, non è stata scattata questa volta e il video è bloccato sul pianeta degli apum. Ma se colpisci di nuovo il sito web, vai nella sezione video e fai clic su ciascun video senza alcun ordinamento, puoi vedere che l'evento <a> si attiva sempre e funziona.
È JavaScript, non Java – Alexander