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

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

我的网站是andrewsimonmcallister.tv,这是我正在谈论的视频部分.我会尝试尽可能多地提供信息,如果我错过了一件事.

这是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视频的第一个星球,您可以看到控制台日志记录,视频将播放.然后点击按日期排序.点击说大城市,这个时候没有一个启发,这个视频被卡在了apemen的星球.但是,如果您再次访问该网站,请进入视频部分,只需点击每个视频,而不进行任何排序,您可以看到< a>事件总是触发,它的作品.