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中的标题引用tio传递视频名称并更改了那里的代码以设置视频，因为fancybox始终打开，所以我知道该事件正在解决。

JQuery .Clone（）丢失了click事件

2 个答案: