JQuery .Clone() loses click event

Question

I am using quicksand to add some cool sorting to my website.

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

But I am having an issue that when I clone my data (content) to sort, the click events get lost.

My website is andrewsimonmcallister.tv, it is the video section that I am talking about. I will try and give as much information as possible, if i am missing anthing just ask.

Here is the HTML section

<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>

On the click event for the video link, I clone the data / content

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

I have a click event on the tag on each div that basically sets which video to play before fancy box kicks 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!");

});

This event works until you click on one of the radio buttons at the top and perform a sort. Then the event gets lost.

Here is the sort code

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

As you can see I have added console logging to show where things are firing so if you open up your java console you can see the a event is getting lost.

To fully demo - hit the website, click on video menu item. Then click on the first planet of the apemen video, you can see the console logging and the video will play. Then click on sort by date. Click on say macropolis, no a evets have fired this time and the video is stuck at planet of the apemen. But if you hit the website again, go into the video section and just click on each video without any sorting you can see that the <a> event always fires and it works.

Answer 1

Use .clone(true) for with data and events: http://api.jquery.com/clone/