12
빠른 검색을 사용하여 웹 사이트에 멋진 분류를 추가하고 있습니다.JQuery .Clone() 클릭 이벤트가 없어집니다.
http://razorjack.net/quicksand/docs-and-demos.html#examples
하지만 내가 정렬 내 데이터 (컨텐츠)를 복제 할 때, 클릭 이벤트가 분실한다는 문제가 발생하고있다.
내 웹 사이트는 andrewsimonmcallister.tv입니다. 제가 말하는 비디오 섹션입니다. 가능한 한 많은 정보를 제공 할 것입니다. 여기
는, 나는 각 사업부의 태그에 클릭 이벤트를$("#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";
});
데이터/컨텐츠를 복제 비디오 링크에 대한 클릭 이벤트에서 [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>
입니다 기본적으로 당신이 클릭 할 때까지이 이벤트는 작동
$("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);
당신은 내가 일을 당신이 (가) 이벤트가 잃어버린 것을 볼 수 있습니다 자바 콘솔을 열면 이렇게 발사되는 곳 보여 콘솔 로깅을 추가 한 볼 수 있듯이이다.
완전히 데모하려면 비디오 메뉴 항목을 클릭하십시오. 그런 다음 apemen 비디오의 첫 번째 행성을 클릭하면 콘솔 로깅이 표시되고 비디오가 재생됩니다. 그런 다음 날짜순 정렬을 클릭하십시오. say macropolis를 클릭하십시오. 에베레는 이번에 해고되지 않으며 비디오는 apemen의 행성에 갇혀 있습니다. 그러나 웹 사이트를 다시 방문하면 동영상 섹션으로 이동하여 정렬없이 각 동영상을 클릭하면 <a> 이벤트가 항상 실행되고 작동한다는 것을 알 수 있습니다. 데이터 및 이벤트에 대한
자바가 아니라 자바 스크립트 – Alexander