JQuery .Clone()丢失了click事件

Question

我正在使用流沙为我的网站添加一些很酷的排序.

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

但我遇到的问题是,当我克隆我的数据(内容)进行排序时,点击事件会丢失.

我的网站是andrewsimonmcallister.tv,这是我正在讨论的视频部分.我会尽量提供尽可能多的信息,如果我错过了anthing只是问.

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

在视频链接的点击事件中,我克隆数据/内容

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

我在每个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视频的第一个星球,你可以看到控制台记录和视频将播放.然后单击按日期排序.点击说macropolis,这次没有一个evets被解雇,视频卡在了猿人的星球上.但如果您再次访问该网站,请进入视频部分,只需点击每个视频而不进行任何排序,您可以看到该<a>事件始终触发并且可以正常工作.

Answer 1

使用.clone(true)与数据和事件:http://api.jquery.com/clone/

Answer 2

所以我删除了设置视频的点击事件。然后使用 fancybox 中的标题引用传递视频名称并更改代码以设置视频，因为 fancybox 始终打开，所以我知道事件正常触发。