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里面对于“ " ”和“/”要进行转义。
希望大家多多支持我的小程序
javascript动态生成按钮并绑定点击事件相关推荐
- jQuery动态添加按钮,绑定点击事件失效
jQuery动态添加按钮,绑定点击事件失效 因为需求需要给页面动态添加按钮并绑定点击事件进行操作, 但是发现绑定的点击事件失效. 原因分析: append中的节点是在整个文档加载完之后开始添加,因此页 ...
- html动态生成按钮事件,javascript 动态生成按钮并添加事件时为什么不响应?
javascript 动态生成按钮并添加事件时为什么事件不响应?(谢谢大家!) 1)html部分 1 2 3 4 5 6 7 8 9 10 11 12 2)script部分 //_t 为一个现在的Ta ...
- 动态生成的DOM做点击事件无效
有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section>测试动态生成的DOM点击事件<br ...
- 如何通过JS动态给li标签添加点击事件并跳转
如何给li标签添加点击事件 一.HTML demo代码 二.JS动态新增li并绑定点击事件 三.效果图 有很长一段时间没写博客了,最近做了一个类似于榜单的小需求,遇到了一些小问题,姑且简单的记录一下吧 ...
- jquery 动态按钮绑定点击事件
一.Jquery实现点击事件的四种写法 来自:https://blog.csdn.net/liutianjie/article/details/85112787 1. $(".tab&quo ...
- JavaScript给按钮绑定点击事件(onclick)的方法及js常见事件
本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!D ...
- 【JavaScript】按钮绑定点击事件-onCliek事件
[JavaScript]按钮绑定点击事件-onCliek事件 <button type="submit" id="btn">btn</butt ...
- jquey javascript 绑定点击事件(click事件无反应,因js获取不到当前的点击项)
问题: 如果DOM元素是动态生成的,在这种情况下为该元素绑定click时间,发现点击事件无效,设置debugger,console.log也没用 解决: juery:为目标元素的父元素,或者是整个文档 ...
- 利用Javascript动态生成表格的小demo
利用Javascript动态生成表格的小demo 利用Javascript中data数据库存储内容动态生成表格,点击删除可对整行内容进行删除 <!DOCTYPE html> <htm ...
最新文章
- Io 异常: The Network Adapter could not establish the connection解决方案
- 研发流程与项目管理之关系
- mongodb空间查询之查询单位
- 如何自己编写Makefile
- React开发(283):控制文件不会被git追踪
- linux进程状态d状态,linux – 进程永久停留在D状态
- Android6.0权限适配及兼容库的实现
- cocos2d-x自制工具02:AnimatePacker v1.1beta发布!!~!
- java设置全选_[Java教程]jQuery设置checkbox全选(区别jQuery版本)
- arraylist linkedlist vector 三者区别
- js浏览器数据库 IndexedDB Web SQL
- Fpdi实现pdf页面合并(php)
- 《东周列国志》第五十八回 说秦伯魏相迎医 报魏錡养叔献艺
- 第十章《日期与时间》第6节:ZoneId、ZoneRegion和ZoneOffset
- 拓嘉启远:拼多多行家心得评论的作用
- python表格绘制斜线表头_Python之ReportLab绘制条形码和二维码
- 详解二叉树的前序遍历
- linux环境怎么更新离线rpm包,SUSE Linux 11系统rpm包离线安装GCC
- 技术汇总:第七章:三种验证方式
- 全国历史天气查询/历史天气预报查询——全国各月份数据爬取