javascript - 问题通过链接更改嵌入式Youtube视频

Question

我在获取要调用的函数时遇到问题。
每当我点击链接时，它似乎都会忽略该功能，只是以youtube全屏模式打开视频。

<script language="javascript" type="text/javascript">
    $("#movies a.youtube").click(function()
         {
            var videoAddress = $(this).attr("href");
            $("#videoArea").html(" ");
            $("#videoArea").html('<iframe width="560" height="315" src="' + videoAddress + '" frameborder="0" allowfullscreen></iframe>');

            return false;
        });
</script>

这是HTML。我只是在尝试测试基本功能时，故意使其他项目没有链接。

<div id="videoArea">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/mMK9kQtl_i4?rel=0" frameborder="0" allowfullscreen>  </iframe>
</div>
        <nav id="movies">
            <ul>
                <li><a class="youtube" href="http://www.youtube.com/embed/mMK9kQtl_i4?rel=0">Nut Job</a></li>
                <li><a class="youtube" href="http://www.youtube.com/embed/9G9Ce7e-gws?rel=0">Devil's Due</a></li>
                <li><a class="youtube" href="">Ride Along</a></li>
                <li><a class="youtube" href="">Saving Mr. Banks</a></li>
                <li><a class="youtube" href="">Frozen</a></li>
            </ul>
            </nav>

Answer 1

尝试将您的jquery代码放入$(function(){});中，以便有时间加载DOM。

$(function() {
    $("#movies a.youtube").click(function()
         {
            var videoAddress = $(this).attr("href");
            $("#videoArea").html(" ");
            $("#videoArea").html('<iframe width="560" height="315" src="' + videoAddress + '" frameborder="0" allowfullscreen></iframe>');

            return false;
        });
});