1、使用原生JS动态为动态创建的对象绑定事件

1-1、创建一个function,用来兼容IE8以下浏览器添加事件

function addEvent(el, type, fn) { 
  if(el.addEventListener){
  el.addEventListener(type,fn,false)
  }else if(el.attachEvent()){
  el.attachEvent('on' + type,fn,false)
  }else{
  return false
}
}

1-2、使用JS创建对象,调用上面的方法

function append(){
  var body=document.getElementsByTagName('body')[0];
  var btn=document.createElement('button');
  btn.type='button';btn.innerHTML='测试';btn.id='test';
  addEvent(btn,'click',function(){
  //触发click代码
  console.log('buton按钮')
})
body.appendChild(btn);
}

append() //执行append方法

 2、使用jQuery为动态创建的对象绑定事件

  var btn = document.createElement('button')
  $(btn).attr("type","button")
  $(btn).html('确定')
  $(btn).click(function(){
    console.log(this.tagName) //结果:BUTTON
  })
  $("body").append(btn)

给js动态创建的对象绑定事件的更多相关文章

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

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

  2. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

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

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

  4. js动态添加的html绑定事件

    使用场景:网站上ul里面的li数据需要从后台数据查询出来即通过js添加数据.然后监听点击li点击事件. 添加数据代码: for(var i = 0; i < table.length; i++) ...

  5. 使用addeventlistener为js动态创建的元素添加事件监听

    点击li弹出内容,并且动态添加li之后有效 <button onclick="addFunction()">点我增加</button> <ul> ...

  6. js动态创建类对象

    1.定义函数,函数中定义类对象 f1=function(){ //定义类 function Pannel(name){ this.name = name; this.print = function( ...

  7. Jquery给动态生成的对象绑定事件

    $(document).on("blur", ".Text1", function () { var index = this.id.replace('txtS ...

  8. JS,Jquery,ExtJs不同脚本动态创建DOM对象

    好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...

  9. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

随机推荐

  1. python基本运算

    环境:python3.x a,b = 60,164 一.算数运算符 操作符 描述 例子 + 加法 a+b = 224 - 减法 a-b = -104 * 乘法 a*b = 9840 / 除(保留小数位 ...

  2. mysql,oracle,sqlserver使用jdbc连接数据库总结

    jdbc连接数据是javaweb开发的一个重点,今天特此来总结一下,加深记忆. jdbc连接数据库一共分为三步: 1:加载驱动 需要去下载各自的驱动jar包,可以去网上搜索一下. 模板:加载驱动程序: ...

  3. springmvc 方法参数自定义的解析

    1.实现HandlerMethodArgumentResolver接口: 2.在配置文件中添加配置<mvc:argument-resolvers>   <bean class=&qu ...

  4. 谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 利用PHPExcel读取Excel的数据和导出数据到Excel

    PHPExcel是一个PHP类库,用来帮助我们简单.高效实现从Excel读取Excel的数据和导出数据到Excel.也是我们日常开发中,经常会遇到的使用场景.比如有个客户信息表,要批量导出发给同事,我 ...

  6. linux下fdisk分区管理、文件系统管理、挂载文件系统等

    分区管理工具有:fdisk, parted, sfdisk fdisk:对于一块硬盘来讲,最多只能管理15分区: # fdisk -l [-u] [device...]  查看硬盘设备分区信息 # f ...

  7. hammer的初始化及移动端各种滑动

    前言:本人对hammer了解不是很多,早做项目时遇到了手机端的一些滑动事件,特此分析下hammer的某些属性. hammer.js是一款开源的移动端脚本框架,他可以完美的实现在移端开发的大多数事件,如 ...

  8. GROUP BY语句与HAVING语句的使用

    一.GROUP BY GROUP BY语句用来与聚合函数(aggregate functions such as COUNT, SUM, AVG, MIN, or MAX.)联合使用来得到一个或多个列 ...

  9. 学习笔记TF009:对数几率回归

    logistic函数,也称sigmoid函数,概率分布函数.给定特定输入,计算输出"success"的概率,对回题回答"Yes"的概率.接受单个输入.多维数据或 ...

  10. 抱歉,您必须拥有一个终端来执行 sudo

    Linux ssh执行远端服务器sudo命令时有如下报错: sudo: sorry, you must have a tty to run sudo sudo:抱歉,您必须拥有一个终端来执行 sudo ...