Question

我目前有一个HTML页面，2个JS文件和一个php文件。 HTML调用第一个调用PHP的JS文件，该文件动态创建页面。在生成的页面上，有几个项目下面有按钮。

我想让这些按钮在第二个JS文件中触发一个函数。

PHP文件：

<head> 
<script type="text/javascript" src="js2.js"></script> 
</head> 
<?php
$i = 0;
for($i=0,$i<3,i++)
{
   echo 'Do '.$i;
   echo '<input value="Do it" type="button" onclick="doit('.$i.')"/>';
}
?>

第二个JS文件：

function doit(p1) 
{       
   //code here  
}

编辑：进一步研究这个工作只是JS函数内部出现错误，导致它看起来好像没有做任何事情。

Answer 1

我猜你的事件没有触发新插入的元素？

问题如下：您加载一些由浏览器呈现的HTML。渲染完成后，DOM就可以加载，并且所有JavaScript处理程序都已设置。

接下来，您通过第一个JS（以及我假设的AJAX回调）动态插入DOM的新部分。在原始DOM完成加载之后这些新的部分来自，因此这些新按钮没有由JS设置任何处理程序。

如果您使用类似jQuery的框架，则可以使用.live()或更新的.on()处理程序将新事件附加到这些新插入的元素。但是，如果您希望支持纯JavaScript，则可以使用addEventListener注册事件。如果您使用后一种解决方案，请注意IE9下的浏览器支持。

普通JavaScript的示例用法是（您的第二个外部JS文件）：

var el = document.getElementsByClassName("yourinputclass"); el.addEventListener("click", doit(el.data), false);

此处el是您要定位的输入。定位是通过元素的类名完成的。在上述代码段的情况下，您的元素还需要额外的数据属性。因此，PHP循环中的示例行将是：

echo '<input class="yourinputclass" value="Do it" type="button" data="'.$i.'" />';

添加单击事件以动态创建按钮

1 个答案: