jQuery .Clone()失去点击事件 [英] JQuery .Clone() loses click event
问题描述
我正在使用流沙在我的网站上添加一些很酷的排序.
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.
我的网站是andrewsimonmcallister.tv，这是我正在谈论的视频部分.如果我想念的话，我会尝试提供尽可能多的信息.
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.
这是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>
在视频链接的点击事件中，我克隆了数据/内容
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";
});
我在每个div的标签上都有一个click事件，该事件基本上设置了在花哨的框插入之前播放哪个视频
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.
这是排序代码
(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控制台，则可以看到事件丢失了.
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.
要完全演示-请访问网站，单击视频菜单项.然后单击apemen视频的第一个星球，您可以看到控制台日志记录，并且视频将播放.然后单击按日期排序.点击说大城市，这次没有任何女星开火，视频被卡在猿人的星球上.但是，如果您再次访问该网站，请进入视频"部分，然后单击每个视频而没有进行任何排序，您会发现<a>事件始终会触发并且可以正常工作.
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.
推荐答案
因此，我删除了点击事件以设置视频.然后在fancybox中使用标题引用，并传递视频名称，并在其中更改代码以将视频设置为fancybox始终打开，因此我知道该事件可以触发.
So I deleted the click event to set the video. Then used the title reference in fancybox tio pass the video name and changed the code there to set the video as the fancybox always opened so I knew that event was firing ok.
这篇关于jQuery .Clone()失去点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
