无法调用null的方法addEventListener() - 即使使用jQuery DOM ready事件

时间:2012-07-20 10:30:39

标签: javascript jquery html innerhtml addeventlistener

我正在使用jQuery for / with javascript以尝试修改.htm文件中div的内部HTML代码。我正在使用这里推荐的jQuery DOM ready事件(http://stackoverflow.com/questions/9856140/javascript-uncaught-typeerror-cannot-call-method-addeventlistener-of-null)以避免脚本被在div准备好之前运行,但这没关系;我一直收到这个错误。

我必须说这是我进入Javascript后的几天,自从我上次使用HTML以来已经很长时间了,所以请不要丢弃任何noob典型的错误,因为很可能是因为它。

以下是我正在使用的文件,托管在Skydrive:

AMPlayer.htm

playlister.js

可以猜到,我正在使用videoJS作为视频播放器。 videojs的CSS和JS文件可以在线引用(http://videojs.com/#section5)或离线引用,如AMPlayer.htm中所示,但这只是环境信息,因为它看起来更像是一个问题javascript而不是videojs的问题。

编辑:我认为文件的重要部分是:

AMPlayer.htm(我认为问题出在这里,所以我要粘贴整个文件):

<!DOCTYPE html>
<html>

<head>
    <link href="video-js.css" rel="stylesheet" type="text/css">
    <script src="video-js.js"></script>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="playlister.js" type="text/javascript"></script>
    <title>AMPlayer</title>
</head>

<body>
    <div id="the-video" class="video-js-box">
            <span>&nbsp;</span>
        </div>
</body>

</html>

playlister.js:

function postVideo()
{

    getNextVideo();
    document.write("NEXT VIDEO: "+videoNames[iNewVideoId]+"<br>");
    var video1 = '<video id="AMPlayer" class="video-js vjs-default-skin" preload="auto" width="650" height="365" data-setup="{}" autoplay> <source src="videos/AVANCE/vid.mp4" type="video/mp4" /><source src="videos/AVANCE/vid.webm" type="video/webm" /></video>';

    //document.write(video1); This writes the text so the video is played, but it drives me to an undesired behaviour
    document.write("BEFORE THE .SETUP<br>");
    //$("#the-video").html(video1); This doesn't work
    //document.getElementById("the-video").innerHTML=video1; This does neither work
    //window.VideoJS.setup($'video1'));
    document.write("AFTER THE .SETUP<br>");
    document.getElementById("AMPlayer").addEventListener('ended', postVideo, true);
    //$(".video-js")[0].player.play();
    document.write("AFTER THE .PLAY<br>");
    //postVideo();
}

任何提供的帮助肯定会非常有用。提前谢谢。

1 个答案:

答案 0 :(得分:3)

您正在尝试获取标识为AMPlayer的元素,但您没有。

您有一个包含要创建的HTML的字符串,但它尚未添加到DOM中。