点击li弹出内容,并且动态添加li之后有效

<button onclick="addFunction()">点我增加</button>
<ul></ul>
<script type="text/javascript">
var num = 1;
var u=document.querySelector("ul");
function addFunction(){
var l=document.createElement('li')
var t=document.createTextNode(num);
l.appendChild(t);
u.appendChild(l);
num++
};
u.addEventListener('click',function(e){
if(e.target && e.target.nodeName.toUpperCase() === 'LI') {
console.log(e.target.innerHTML)
}
})
</script>

使用addeventlistener为js动态创建的元素添加事件监听的更多相关文章

  1. js动态创建的元素绑定事件

    新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("can ...

  2. 如何给js动态创建的dom添加事件

    delegate() 方法 实例 当点击鼠标时,隐藏或显示 p 元素: $("div").delegate("button","click" ...

  3. js添加事件监听的方式与this

    js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...

  4. 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效

    最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖  npm install flatpickr --save 随后在页面中引入css ...

  5. 给js动态创建的对象绑定事件

    1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.ad ...

  6. JavaScript给动态插入的元素添加事件绑定

    由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...

  7. jquery中为动态增加的元素添加事件

    // html代码 <ul id="main"> </ul> // js代码 $(function(){ // 动态添加html代码 $("#ma ...

  8. jquery动态生成的元素添加事件的方法

    动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...

  9. JS动态创建SVG元素并绑定事件

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.set ...

随机推荐

  1. c#判断是否有网络

    //调用操作系统API [System.Runtime.InteropServices.DllImport("wininet")] private extern static bo ...

  2. Oracle RAC环境下ASM磁盘组扩容

    生产环境注意调整以下参数: ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  3. jenkins git 之 Advanced clone behaviours

    jenins 上的 Git Plugin插件,默认是下载完整的历史版本,随着分支约多,历史版本约多,整个文件会很大,下载常常会超时. 单独的git命令可以使用以下方式来优化 git clone --d ...

  4. thymeleaf(一)

    (一)Thymeleaf 是个什么?      简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下 ...

  5. 关于js执行机制的理解

    js是单线程语言.指的是js的所以程序执行通过仅有的这一个主线程来执行. 但是还有辅助线程,包括定时器线程,ajax请求线程和事件线程. js的异步我理解的是: 主线程执行时候,从上到下依次执行,遇到 ...

  6. 网站SEO优化问答精选【转载】

    在接触seo的过程中,大家都会碰到很多这样或那样的问题,特别是一些seo新手由于知识有限会经常到很多地方问一些网站优化的问题,做seo时间慢慢变长之后,知识会慢慢地积累,之前的问题也会慢慢的都被解答. ...

  7. php计算几分钟前、几小时前、几天前的几个函数

    函数方法: /*php计算几分钟前.几小时前.几天前的几个函数*/ function get_date($time){ $t=time()-$time; $f=array( '31536000'=&g ...

  8. django 初始命令

    1.安装django pip3 install django 2.创建一个Django对象 django-admin.py startproject 项目名称 django-admin.py star ...

  9. ASP.NET页面使用JQuery EasyUI生成Dialog后台取值为空

    原因: JQuery EasyUI生成Dialog后原来的文档结构发生了变化,原本在form里的内容被移动form外面,提交到后台后就没有办法取值了. 解决办法: 在生成Dialog后将它append ...

  10. Linux 命令 which whereis locate find

    which: 查询某指令的完整路径 $ which [-a] command -a: 将所有在PATH目录中可以找到的指令均列出. 注意:只搜索PATH下的路径. whereis: 只搜索几个特定目录 ...