JQuery .Clone() pierde el evento de clic

Question

Estoy usando arenas movedizas para agregar una buena clasificación a mi sitio web.

http://razorjack.net/quicksand/docs-and-demos.html#examples

Pero estoy teniendo un problema que cuando clon mis datos (contenido) para ordenar, los eventos de clic se pierden.

Mi sitio web es andrewsimonmcallister.tv, es la sección de video de la que estoy hablando. Trataré de dar tanta información como sea posible, si me falta algo, solo pregúntame.

Aquí está la sección 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> 

En el evento Click para el enlace del video, que clonar los datos/contenido

$("#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"; 
}); 

tengo un evento de clic en la etiqueta de cada div que básicamente establece qué video jugar antes de que la caja elegante patee en

$("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!"); 

}); 

Este evento funciona hasta que haga clic en uno de los botones de radio en la parte superior y realizar un tipo. Entonces el evento se pierde.

Aquí está el código de clasificación

(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); 

Como se puede ver, he añadido conexión de la consola para mostrar donde las cosas están disparando por lo que si se abre la consola de Java se puede ver el evento se está perdiendo.

Para una demostración completa: acceda al sitio web, haga clic en el elemento del menú de video. Luego haz clic en el primer planeta del video de simios, puedes ver el registro de la consola y el video se reproducirá. Luego haga clic en ordenar por fecha. Haga clic en decir macropolis, esta noche no se han lanzado los evets y el video está atascado en el planeta del hombre mono. Pero si vuelve a acceder al sitio web, vaya a la sección de videos y simplemente haga clic en cada video sin ordenar, puede ver que el evento <a> siempre se activa y funciona.

Answer 1

Así que suprime el evento de clic para establecer el vídeo. Luego utilicé la referencia del título en fancybox tio, pasé el nombre del video y cambié el código allí para establecer el video, ya que siempre se abría el fancybox, así que sabía que el evento estaba funcionando bien.

Answer 2

Uso de .clone(true) con los datos y eventos: http://api.jquery.com/clone/