Javascript 如何使用修改HTML5视频播放器的onClick函数动态地填充带有div的页面？

正如过于具体的标题所表明的，我正在尝试使用javascript向页面动态添加div（基于我必须为HTML5媒体播放器加载多少视频），并且我希望每个div都有一个单独的onclick函数来更改媒体播放器的源

我已经获得了动态添加div的页面，但是div没有onClick函数，尽管我在创建过程中分配了它们。在谷歌搜索了一些（阅读：很多）之后，我发现问题在于我只能引用一个函数，而不能在onClick事件中放入特定的代码（我想是吧？），因此，我修改了代码，现在我有了以下内容：

<video name = "myVideo" style = "width: 500px; height: 300px" id = "player" controls = "controls" autoplay = "autoplay">  
<source name = "VidSource" src = 'video.mp4'>  
<source name = "VidSource" src = 'video2.webm'>  
</video><br><br><br>  


<script type = "text/javascript">  
var sourceName = document.getElementsByName("VidSource");  

for (x = 0; x< sourceName.length; x = x+1)  
{  
    var stringToSend = sourceName[x].src;  
    var substringint = stringToSend.lastIndexOf("/");  
    stringToSend = stringToSend.substring((substringint + 1));  
    createDiv("Div" + x, 250, 40, stringToSend);  

    document.write("<br>");  
}  

function createDiv(id, width, height, toWrite)  
{  
    var newdiv = document.createElement('div');   
    newdiv.id = id;  
    newdiv.style.width = width;  
    newdiv.style.height = height;  
    newdiv.style.overflow = "auto";  

    newdiv.style.background = "#FF0000";  
    newdiv.style.border = "2px solid #FFFFFF";  

    var substringint = toWrite.lastIndexOf("/");  
    toWrite = toWrite.substring((substringint + 1));  

    newdiv.innerHTML = " <center> " + toWrite + "</center>";  
    newdiv.onClick = "changeSrc(" + toWrite ");";   
    document.body.appendChild(newdiv);  
}  

function changeSrc(src)  
{  
    document.myVideo.src = src;  
    video.load();  
    video.play();  
}  


</script>  

var sourceName=document.getElementsByName（“VidSource”）；
对于（x=0；x”）；
}  
函数createDiv（id、宽度、高度、toWrite）
{  
var newdiv=document.createElement（'div'）；
newdiv.id=id；
newdiv.style.width=宽度；
newdiv.style.height=高度；
newdiv.style.overflow=“自动”；
newdiv.style.background=“#FF0000”；
newdiv.style.border=“2px solid#FFFFFF”；
var substringint=toWrite.lastIndexOf（“/”）；
toWrite=toWrite.substring（（substringint+1））；
newdiv.innerHTML=“+toWrite+”；
newdiv.onClick=“changeSrc（“+toWrite”）；”；
文件.body.appendChild（newdiv）；
}  
函数更改src（src）
{  
document.myVideo.src=src；
video.load（）；
video.play（）；
}  

所以，输出的只是媒体播放器，根本没有div

任何帮助都将不胜感激。我觉得我遗漏了一些非常明显的东西，但再多的搜索也不能帮助我找到我所犯的错误。

带有小写字母“c”的onclick属性。那可能是你的问题

但是注册事件的方法是使用

addEventListener

，而不是分配给

onclick

属性。展示了如何。为了更好的可移植性，我会使用该模型（或者更好的是，使用它可以解决所有的可移植性问题）

编辑：哦，是的，正如你在问题中所说（但没有反映在代码中），你需要分配一个函数（无论你是使用

onclick

还是

addEventListener

），而不是一个包含代码的字符串。因此，你有：

newdiv.onClick = "changeSrc(" + toWrite ");";

相反，请使用：

newdiv.onclick = function() { changeSrc(toWrite); };

或：

或者最好（最可移植），使用jQuery（需要导入该库）：

---

这更容易避免犯错误，因为您不需要连接字符串并形成自己的JavaScript语法：请注意，在字符串版本中，您需要引用

toWrite

，并转义函数版本中不需要的任何特殊字符。

我按照您所说的方法对其进行了更改，使用newdiv.onclick=function（）{changeSrc（toWrite）；}；这样做确实使div出现了，但是我现在又回到了原点。div正在出现，但其中没有onclick函数（既不工作，也不使用googlechrome检查元素）。谢谢你的帮助，你知道还有什么事情会搞砸吗？我现在要用addEventListener试试，看看能不能解决什么问题。嗯。。。在Firefox4和Chromium 10中，直接分配给

onclick

属性对我都有效。两者都能正确地处理单击操作，并且如果我在控制台中键入

newdiv.onclick

，它们都能让我看到函数。所以我不知道会出什么问题。尝试在处理程序函数中放置一个简单的

窗口.alert（“”

），看看它是否出现。如果要尝试jQuery选项，请使用：$（newdiv）.live（“单击”，函数（）{changeSrc（toWrite）；}）；这确保了将来的任何“newdiv”元素也将具有该操作。@Ian Devlin听起来很酷，但它是否适用于从DOM元素而不是选择器构建的jQuery对象？我假设

newdiv

是一个DOM元素（非jQuery），因此

$（newdiv）

将其封装在jQuery中。如果使用选择器找不到任何未来的“newdiv”元素，

live

如何知道它们？事实上，我认为在文档页面的“注意事项”中排除了这种特定用法。

newdiv.addEventListener("click", function() { changeSrc(toWrite); }, false);

$(newdiv).click(function() { changeSrc(toWrite); });