原生js怎么为动态生成的标签添加各种事件

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom对象是找不到的,jq通过事件委托解决了这个问题,但是原生js这个问题该怎么解决呢?我在网上查了很多资料,好像只有一种办法,那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件,如果有更好的方法,欢迎提出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="a">我是初始就有的div </div>
</body>
<script type="text/javascript">
window.onload = function () {

    var myp = document.createElement(‘p‘);
    document.getElementById(‘a‘).appendChild(myp);
    alert(document.getElementsByTagName(‘p‘)[0])
    myp.innerHTML = ‘我是新建的p标签‘;
document.getElementsByTagName(‘p‘)[0].onclick = function(){
        alert(‘我是p的点击事件‘)
    }

}
</script>
</html>
时间: 2024-10-13 17:31:53

原生js怎么为动态生成的标签添加各种事件的相关文章

jquery中对动态生成的标签响应click事件(二)…与ajax交互使用

<script> jQuery(document).ready(function($) { $('#clickme').bind('click', function() { $.ajax({ type: "post", async:false, url: "ajax.jsp", data: { key: "Delete"}, success: function (data) { $('#divContent').append('<

jquery中对动态生成的标签响应click事件(一)

参考自:http://my.oschina.net/lishixi/blog/31612 <script>jQuery(document).ready(function($) { $('#clickme').bind('click', function() {  alert("sdfw");  var html = "<div class='clickyou'>Another target</div>";  $("#di

jquery中对动态生成的标签不会响应click事件

Jquery中对ajax动态生成的html标签不会响应 $(selector).click(function.. 或者$(selector).bind('click',function.., 需要用.live. 我们这样绑定元素的click事件,以后jquery动态生成的元素,click事件也有效. $('.clickme').live('click', function() { alert("Live handler called."); });

动态生成DOM元素绑定click事件无效问题

在页面里,jq动态生成dom节点,该节点的click事件无效. 如,html里动态添加class名为.del的<a>, js文件中: $('.del').bind('click',fuction(){ alert('sda'); }) 不响应, 网上说可以用live代替bind事件,但在jq1.7版本开始,就取消了live事件, 解决方法: on()事件 代码改为: $(document).on('click','.del',fuction(){ alert('sda'); }) 这样就搞定了

动态的给标签添加提示信息

<div id="LUnameContentDiv" style="max-width:220px;height:24px;line-height:24px;overflow: hidden;" onmouseover="ContentMouseOver(this)" title="admin"> <span id="LUnameLabel" style="color:White

jquery无法为动态生成的元素添加点击事件的解决方法

遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <div> <ul> <li> <span> <i class='icon'>这是元素内容</i> //i是动态生成 </span> </li> </ul> </div> 解决方法如下: $(docu

动态给表格TD 添加单击事件

需求:项目中对原有的JQ框架表格功能要进行完善 实现 单元格单击编辑 思路:JS中遍历生成好的表格 动态给TD 添加单击事件. 问题:遍历添加时,给TD 加样式 加属性都可以 但是如果要加单击事件 死活加不上去. 1 //文本控件模版 2 var textTemp = "<input type=\"text\" value={0} />"; 3 var RawData; //原始数据 4 //js控制列 可修改 5 $("tr", $

JQuery不能触发动态生成的html的click事件

//错误code$( function() {         $(".addBtn").click( function() {         addNode($(this));     }).end(); }) //动态生成html function addNode(cur) {     if(cur.parent().has("ul").size() != 0) {         cur.parent().children("ul:first&qu

动态生成的html添加事件

一.问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素. 二.解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). live()的详细使用方法可以查看jQuery live() live()和