Question

我正在尝试构建一个应用程序，以根据类别查看YouTube视频。用户会看到一个类别下拉列表，他会选择一个类别。 div'rContent'填充了该类别中的链接列表。当用户点击YouTube视频在iframe中打开的其中一个链接时。问题是当用户点击视频在Firefox中显示但在Chrome中无法使用的链接时。没有任何事情发生。

<!-- Dynamically retrieved list of videos shown here, see sample below -->
<div id="rContent"></div>             

<!-- YouTube video will be shown in this iframe-->
<div class="video-container">
    <iframe id="userVideo" src="" frameborder="0" width="560" height="315"></iframe>
</div>

<script>    
$("#rContent").on('click', '.vid_trigger', function() {
    var URL = $(this).attr('href'); 
    $(userVideo).attr('src',URL)
    return false;   
});
</script>

<!--- sample of dynamic content -->
<a class="vid_trigger" href="http://www.youtube.com/embed/fgqpHl5OGFA?rel=&autoplay=1"> … </a><br></br>
<a class="vid_trigger" href="http://www.youtube.com/embed/c-d4rDY70zk?rel=&autoplay=1"> … </a><br></br>

Answer 1

你有没有尝试过preventDefault？您应该使用preventDefault，这是您单击链接时的默认行为。

除了链接不应该在div #rContent里面？您正在使用.on，因此链接应位于父级内。

Answer 2

<!-- Dynamically retrieved list of videos shown here -->
<div id="rContent">
    <a class="vid_trigger" href="http://www.youtube.com/embed/fgqpHl5OGFA?rel=&autoplay=1"> … </a><br></br>
    <a class="vid_trigger" href="http://www.youtube.com/embed/c-d4rDY70zk?rel=&autoplay=1"> … </a><br></br>
</div>             

<!-- YouTube video will be shown in this iframe-->
<div class="video-container">
    <iframe id="userVideo" src="" frameborder="0" width="560" height="315"></iframe>
</div>

<!-- script must be placed after DOM elements -->
<script type="text/javascript">    
    $("#rContent").on('click', '.vid_trigger', function() {
        $('#userVideo').prop('src', this.href)
        return false;   
    });
</script>

FIDDLE

Answer 3

这一行

$(userVideo).attr('src',URL)

应该是这样的：

$('#userVideo').attr('src', URL); //select using id selector

动态生成的html链接在Firefox中可用，但在Chrome中不起作用

3 个答案: