javascript动态生成按钮并绑定点击事件

         前一个多月公司的前端开发人员离职,公司一直在招前端,基本上每天都有几个来面试的人,就这个面试频率,也才招了一个多月才招到。绝大部分都是死在了一道上机面试提上。题目很基础,但也很考基本功,基本上才3%左右的人做出来。当时我就在想以我的半吊子前端知识挑战一下这个题目。之前一直忙着把Android项目弄上线,修改bug,一直没时间。现在国庆节放假,发了一天时间把前端又看了下,然后理所当然的就写出来了,功能虽然完成了,但代码不怎么优雅。

         题目是说有一个html页面,页面有一个按钮,点击这个按钮,弹出一个框说自己是几号按钮,并询问是否生成新按钮。 点是生成一个新按钮,新按钮也能继续响应点击事件,生成新按钮。如图

点击弹框如图。

点确定,生成新按钮,点击新按钮能继续弹窗问是否生成新按钮。并报自己是几号按钮。

分析下这道题发现难点在将生成的新按钮绑定点击事件,并能监听自己是几号按钮。解决办法是用js动态插入html代码,在插入的html代码中绑定点击事件。然后在点击事件中获取页面中所有按钮,为每一个按钮设置一个属性,用来标记自己是几号按钮。代码如下。其实也很简单的。如果有更简洁逼格更高的写法,欢迎讨论。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<head>
<body>
<input name="按钮" type="button" onClick="clic()" value="按钮"></input>
<div id="content"></div>
<script type="text/javascript">
clic();
function clic(){
var bs = document.getElementsByTagName("input");
for(var i=0;i<bs.length;i++){
    var b = bs[i];
    b.setAttribute("aaa",i);
    b.onclick = function(){
      var s = confirm("我是"+this.getAttribute("aaa")+"号按钮,是否生成新按钮");
      if(s){
          document.getElementById("content").innerHTML += "</br><input name=\"按钮\" type=\"button\" onClick=\"clic()\" value=\"按钮\"><\/input>";
		  clic();
	  }
    };
}
}
</script>
</body>
</html> 

小细节:1:在js代码里要手动掉一次clic方法。不然第一个按钮点两次才有反应。2:innerHtml里面对于“ " ”和“/”要进行转义。

希望大家多多支持我的小程序

  • 5
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值