javascript 动态生成控件动态注册事件，仅最后一个控件执行

sjt000 2010-03-18 04:24:18

情景描述：1.点击按钮动态生成控件--》2.给该控件注册点击事件,3.添加第一按

钮点击后弹出OK，没有问题

问题：当添加第二个的时候，第二个点击弹出OK，但第一个按钮

点击无反应

情况总结：仅有最后一个按钮的点击事件可以执行，前面动态添加的都不执行

解决方案除外要求：由于特殊情况，不能直接写为<input onclick='XXX'>



<html xmlns="http://www.w3.org/1999/xhtml">



<head >



    <title></title>



</head>



<body>



    <div id="dongtaiDIV">



    </div>



    <p>



        <input id="addBtn" type="button" value="动态注册代码" 





onclick="addControl()" /></p>



 



    <script type="text/javascript">



 



        var AllID = 0;



        function addControl() {



            document.getElementById("dongtaiDIV").innerHTML += "  <input id='btn" + AllID + "' type='button' value='事件按钮" + AllID + "'  />";



            var Control = document.getElementById('btn' + AllID);



            Control.attachEvent("onclick", function() { alert('OK') });



 



            AllID++;



        }



    </script>



</body>



</html>

暂时只考虑IE浏览器

...全文

213 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

hhhh63 2010-03-18

打赏
举报

改成下面的样子，在多款浏览器上测试通过

<script type="text/javascript">
var AllID = 0;
function addControl() {
document.getElementById("dongtaiDIV").innerHTML += " <input id='btn" + AllID + "' type='button' value='事件按钮" + AllID + "' onclick='aaaa(" + AllID + ")' />";
AllID++;
}

function aaaa( id )
{
alert( id );
}

</script>

llqoo 2010-03-18

打赏
举报

变量AllID 的值都没有传过来，哪来的值，你还AllID ++，又不是循环，怎么会有结果,如果两个按钮是同是事件，事件名一样就可以了

sjt000 2010-03-18

打赏
举报

解决了，wh_wangjun同学说的比较好

阿非 2010-03-18

打赏
举报



<html xmlns="http://www.w3.org/1999/xhtml">



<head >



    <title></title>



</head>



<body>



    <div id="dongtaiDIV">



    </div>



    <p>



        <input id="addBtn" type="button" value="动态注册代码" 





onclick="addControl()" /></p>



 



    <script type="text/javascript">



 



        var AllID = 0;



        function addControl() {



            document.getElementById("dongtaiDIV").innerHTML += "  <input name='btn' id='btn" + AllID + "' type='button' value='事件按钮" + AllID + "'  />";



            var els = document.getElementsByName("btn");



			for(var i=0,len=els.length;i<len;i++){

				els[i].onclick=function(){alert('ok')};

			}			



            AllID++;



        }



    </script>



</body>



</html>

MicroDeviser 2010-03-18

打赏
举报

学习了！！！！！！！！！！

wh_wangjun 2010-03-18

打赏
举报

[Quote=引用 10 楼 wh_wangjun 的回复:]
使用语句
document.getElementById("dongtaiDIV").innerHTML += " <input id='btn" + AllID + "' type='button' value='事件按钮" + AllID + "' />";
实际上是先删除了元素，再增加元素。
所以原先定义的事件处理函数都无效了。
[/Quote]
要改用
createElement
appendChild
等方法

wh_wangjun 2010-03-18

打赏
举报

使用语句
document.getElementById("dongtaiDIV").innerHTML += " <input id='btn" + AllID + "' type='button' value='事件按钮" + AllID + "' />";
实际上是先删除了元素，再增加元素。
所以原先定义的事件处理函数都无效了。

阿非 2010-03-18

打赏
举报

attachEvent
兼容性不好

可直接 html元素.事件的形式

eg: button.onclick=function(){};

阿非 2010-03-18

打赏
举报

document.getElementById("dongtaiDIV").innerHTML +=

因为这句的原因，每次都会重解析，这样现有的button 的click 事件就冲掉了

两个办法

一个是:

document.getElementById("dongtaiDIV").innerHTML += " <input id='btn" + AllID + "' type='button' value='事件按钮" + AllID + "' onclick='function();' />";

就是添加button 的时候同时指定 onclick

另一个是:

document.getElementById("dongtaiDIV").innerHTML += " <input name='btn' id='btn" + AllID + "' type='button' value='事件按钮" + AllID + "' />";

var els= document.getElementsByName('btn');

循环为els[i]指定onclick

els[i].onclick=function(){};

sjt000 2010-03-18

打赏
举报

help~~~~

cfvgodot 2010-03-18

打赏
举报

额。。。是我看错了。。。。。呵呵研究研究！

丰云 2010-03-18

打赏
举报

试下
Control.attachEvent("onclick", function() { test("ok")});

function test(str){
alert(str);
}

telankes2000 2010-03-18

打赏
举报





var AllID = 0;



        function addControl() {



            document.getElementById("dongtaiDIV").innerHTML += "  <input id='btn" + AllID + "' type='button' value='事件按钮" + AllID + "' onclick="tt('"+AllID +"')" />";



           



 



            AllID++;



        }

function tt(btnID){

  var Control = document.getElementById('btn' + btnID);



            Control.attachEvent("onclick", function() { alert('OK') });

}