我正在使用精美的盒子插件在灯箱中播放视频。视频使用当前代码正确播放，但由于href中使用了散列，因此页面始终位于顶部。我尝试过使用preventDefault（）但没有用。
我尝试搜索与防止默认相关的不同答案，但没有用。
这是我的代码如下。请帮忙
jQuery(document).ready(function($) {
jQuery(".fancy_video").prepend("<span class=\"playbutton\"/>")
// FANCY BOX ( LIVE BOX) WITH MEDIA SUPPORT
jQuery(".fancy_video").fancybox({
scrolling: "no",
padding: 0,
nextEffect: "fade",
prevEffect: "fade",
nextSpeed: 0,
prevSpeed: 0,
fitToView: true,
autoSize: true,
modal: false, // hide default close and navigation buttons
helpers: {
media: {}
}
});
$('#video1').click(function(e) {
e.preventDefault();
$("#data1").find('video').attr('autoplay', 'autoplay');
$('#video_size').get(0).play();
})
$('#video2').click(function(e) {
e.preventDefault();
$("#data2").find('video').attr('autoplay', 'autoplay');
$('#video_size1').get(0).play();
})
$('#video3').click(function(e) {
e.preventDefault();
e.stopPropagation();
$("#data3").find('video').attr('autoplay', 'autoplay');
$('#video_size2').get(0).play();
})
$('#video4').click(function(e) {
e.preventDefault();
$("#data4").find('video').attr('autoplay', 'autoplay');
$('#video_size3').get(0).play();
})
$('#video5').click(function(e) {
e.preventDefault();
$("#data5").find('video').attr('autoplay', 'autoplay');
$('#video_size4').get(0).play();
})
$('#video6').click(function(e) {
e.preventDefault();
$("#data6").find('video').attr('autoplay', 'autoplay');
$('#video_size5').get(0).play();
})
});<link href="http://mediasphereindia.com/apac/pages/mobile_video/css/main.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="video">
<figure>
<a class="fancy_video" href="#data5" id="video5">
<img class="videoThumb" src="images/videos/mobile_video/inview-inline.png">
</a>
<div style="display:none">
<div style="display:inline;" id="data5">
<video id="video_size4" preload="none" controls>
<source src="images/videos/mobile_video/inview-inline.mp4" type="video/mp4" />
<source src="images/videos/mobile_video/inview-inline.webm" type="video/webm" />
<source src="images/videos/mobile_video/inview-inline.ogv" type="video/ogg" />
<object width="100%" height="90%" type="application/x-shockwave-flash" data="/apac/pages/adgallery/scripts/flashmediaelement.swf">
<param name="movie" value="/apac/pages/adgallery/scripts/flashmediaelement.swf" />
<param name="flashvars" value="autoplay=true&controls=true&file=/apac/images/videos/mobile_video/inview-inline.mp4" />
<param name="allowFullScreen" value="true" />
</object>
</video>
</div>
</div>
</figure>
<h3 class="videoTitle">InView Inline</h3>
<p>Video ad auto-plays inline with content without sound as it appears on screen and pauses if people scroll past. Clicking on the video takes you to the advertiser landing page.</p>
</article>
<article class="video">
<figure>
<a class="fancy_video" href="#data6" id="video6">
<img class="videoThumb" src="images/videos/mobile_video/inview-pushdown.png">
</a>
<div style="display:none">
<div style="display:inline;" id="data6">
<video id="video_size5" preload="none" controls>
<source src="images/videos/mobile_video/inview-pushdown.mp4" type="video/mp4" />
<source src="images/videos/mobile_video/inview-pushdown.webm" type="video/webm" />
<source src="images/videos/mobile_video/inview-pushdown.ogv" type="video/ogg" />
<object width="100%" height="90%" type="application/x-shockwave-flash" data="/apac/pages/adgallery/scripts/flashmediaelement.swf">
<param name="movie" value="/apac/pages/adgallery/scripts/flashmediaelement.swf" />
<param name="flashvars" value="autoplay=true&controls=true&file=/apac/images/videos/mobile_video/inview-pushdown.mp4" />
<param name="allowFullScreen" value="true" />
</object>
</video>
</div>
</div>
</figure>
<h3 class="videoTitle">InView Pushdown</h3>
<p>Video ad auto-plays by pushing the page half down. Video pauses if people scroll past. Clicking on the video takes you to the advertiser landing page.</p>
</article>
<article class="video">
<figure>
<a class="fancy_video" href="#data1" id="video1">
<img class="videoThumb" src="images/videos/mobile_video/maxvdo.png">
</a>
<div style="display:none">
<div style="display:inline;" id="data1">
<video id="video_size" preload="none" controls>
<source src="images/videos/mobile_video/maxvdo.mp4" type="video/mp4" />
<source src="images/videos/mobile_video/maxvdo.webm" type="video/webm" />
<source src="images/videos/mobile_video/maxvdo.ogv" type="video/ogg" />
<object width="100%" height="90%" type="application/x-shockwave-flash" data="/apac/pages/adgallery/scripts/flashmediaelement.swf">
<param name="movie" value="/apac/pages/adgallery/scripts/flashmediaelement.swf" />
<param name="flashvars" value="autoplay=true&controls=true&file=/apac/images/videos/mobile_video/maxvdo.mp4" />
<param name="allowFullScreen" value="true" />
</object>
</video>
</div>
</div>
</figure>
<h3 class="videoTitle">Max.VDO</h3>
<p>With a total unit size of 320px x 288px, this format allows the unit to push down the entire screen. Auto-plays video ads and resolves to original app or mobile site.</p>
</article>
<article class="video">
<figure>
<a class="fancy_video" id="video3" href="#data3">
<img class="videoThumb" src="images/videos/mobile_video/minivdo.png">
</a>
<div style="display:none">
<div style="display:inline;" id="data3">
<video id="video_size2" preload="none" controls>
<source src="images/videos/mobile_video/minivdo.mp4" type="video/mp4" />
<source src="images/videos/mobile_video/minivdo.webm" type="video/webm" />
<source src="images/videos/mobile_video/minivdo.ogv" type="video/ogg" />
<object width="100%" height="100%" type="application/x-shockwave-flash" data="/apac/pages/adgallery/scripts/flashmediaelement.swf">
<param name="movie" value="/apac/pages/adgallery/scripts/flashmediaelement.swf" />
<param name="flashvars" value="autoplay=true&controls=true&=true&file=/apac/images/videos/mobile_video/minivdo.mp4" />
<param name="allowFullScreen" value="true" />
</object>
</video>
</div>
</div>
</figure>
<h3 class="videoTitle">Mini.VDO</h3>
<p>Mini.VDO offers an expanding panel that plays within the horizontal banner on the top of the screen. Compatible with all devices across Mobile Web, delivering exceptional quality.</p>
</article>
<article class="video">
<figure>
<a class="fancy_video" id="video4" href="#data4">
<img class="videoThumb" src="images/videos/mobile_video/prerollvdo.png">
</a>
<div style="display:none">
<div style="display:inline;" id="data4">
<video id="video_size3" preload="none" controls>
<source src="images/videos/mobile_video/prerollvdo.mp4" type="video/mp4" />
<source src="images/videos/mobile_video/prerollvdo.webm" type="video/webm" />
<source src="images/videos/mobile_video/prerollvdo.ogv" type="video/ogg" />
<object width="100%" height="100%" type="application/x-shockwave-flash" data="/apac/pages/adgallery/scripts/flashmediaelement.swf">
<param name="movie" value="/apac/pages/adgallery/scripts/flashmediaelement.swf" />
<param name="flashvars" value="autoplay=true&controls=true&=true&file=/apac/images/videos/mobile_video/prerollvdo.mp4" />
<param name="allowFullScreen" value="true" />
</object>
</video>
</div>
</div>
</figure>
<h3 class="videoTitle">PreRoll</h3>
<p>This 320px x 480px ad space can change based on different integrations. Ad units can play within site pages, or within native video player across Mobile Web and Apps. The unit supports an ad space of 480px x 270px for horizontal orientation in iPhone.</p>
</article>
对不起，我再次尝试了代码，而我使用preventDefault（）的行是没用的。请帮忙。谢谢
答案 0 :(得分：0)
如果你是动态添加那么需要以这种方式触发事件监听器到动态内容如下
$（document）.on（event，selector，callback）;