html5/js 动态加载的代码如何创建点击事件。

下面的代码是根据后台数据动态加载进去的(数量不确定),请问怎么为每个class='stamp stamp02' 的div创建点击事件,并提取触发该事件的div块中中的内容。在线等。求大神指点。

 <div id="yhj-info"  class='stamp stamp02' >
                        <div class='par'>
                            <sub class='sign'>¥50</sub>
                            <span></span>
                            <sub>优惠券</sub>
                            <p>劵号:<font id="num">123123123</font></p>
                        </div>
                        <div class='copy'>副券
                            <p><br></p>
                        </div>
                        <i></i>
                    </div>
                        <div id="yhj-info"  class='stamp stamp02' >
                        <div class='par'>
                            <sub class='sign'>¥50</sub>
                            <span></span>
                            <sub>优惠券</sub>
                            <p>劵号:<font id="num">123123123</font></p>
                        </div>
                        <div class='copy'>副券
                            <p><br></p>
                        </div>
                        <i></i>
                    </div>
0

1个回答

通过dom关系获取,传入this,不需要id

 <div id="yhj-info" class='stamp stamp02' onclick="getInfo(this)">
    <div class=' par'>
    <sub class='sign'>¥500</sub>
    <span></span>
    <sub>优惠券</sub>
    <p>劵号:<font id="num">123123123</font></p>
</div>
    <div class='copy'>
        副券
        <p><br></p>
    </div>
    <i></i>
</div>
<div id="yhj-info" class='stamp stamp02' onclick="getInfo(this)">
    <div class='par'>
        <sub class='sign'>¥50</sub>
        <span></span>
        <sub>优惠券</sub>
        <p>劵号:<font id="num">123123123xxxx</font></p>
    </div>
    <div class='copy'>
        副券
        <p><br></p>
    </div>
    <i></i>
</div>
<script>
    function getInfo(div) {
        var sub = div.getElementsByTagName('sub')[0]; alert(sub.innerHTML)
        var font = div.getElementsByTagName('font')[0]; alert(font.innerHTML)
    }
</script>
0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
HTML5快速入门实例(六)audio元素静态加载和动态加载实例
例子一: 浏览器不支持audio元素 <!-- 注意有些格式某些浏览器不支持,为避开这个限制,可以准备多个不同格式的音频文件,以供浏览器选择并播放。 audio标签中允许出现多个标签,浏览器会自动使用第一个支持的格式. 也可以在js中使用audio对象来动态加载音频。根据需要,我们通过audio对象控制音频
js动态加载HTML元素时出现的无效的点击事件
原文地址: http://www.cnblogs.com/heganlin/p/5848833.html在开发的过程过发现通过js动态添加的html代码绑定的事件不起作用,后来百度搜索到这篇文章,为防止找不到,特在此备份。js动态加载HTML元素时出现的无效的点击事件项目中列表数据中隐藏着详情数据,图一:详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生...
动态添加的标签如何调用js事件
在<定制快报>中项目中遇到的问题:1、动态添加的标签无法绑定js事件函数?采2、动态添加的标签无法调用函数??
js动态添加点击事件
在前端中,我们经常要添加点击事件。尤其是在动态的元素上添加点击事件。经常会添加之后没有反应。 可能的原因: 点击事件的名称写错 这种低级的错误经常犯,在js代码中添加的事件其实是没有添加的。两者的名字不同或者,选择器有问题没有选中元素。 这个问题可以在调试的窗口选中元素在监听事件中去查看有没有添加上监听事件 如图: 就已经添加上了点击事件,如果没有。那么检查你的变量名和选择器。
HTML5+中动态构建列表并填充数据
部分代码参考demo----《历史上的今天》。         感谢作者的分享,愿好人一生平安,虽然只有两个页面,但是通过这个示例让我学会了5+中如何动态构建列表并填充数据,非常实用。 html部分:                                   历史上的今天
AJAX动态添加li之后无法触发事件
$(".sewvbm2").on("click","li",function(){}); 直接用click可能会失效,$(".sewvbm2").click(function(){})
Unity UGUI按钮动态添加点击事件
使用代码的方式给按钮添加点击事件需要引入两个命名空间: using UnityEngine.UI; using UnityEngine.Events; 先创建一个界面,并且在界面里放置一个按钮: 创建一个Test脚本,代码如下: using UnityEngine; using System.Collections; using UnityEngine.UI;
html5手机页面 点击事件
Zepto.js和jquery区别在于: Zepto.js是小巧的适用于手机页面的js框架 jquery比Zepto.js相对大一点, 两者语法大致相同 zepto.js手机页面点击事件代码如下: 1 $("#android_link").on('click', 2
动态生成按钮如何添加点击事件
       jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式。就拿$().click()和$(document).on('click','要选择的元素',function(){})来说,都是点击事件的操作,但是也有不同的地方。1. $(选择器).click(fn)   当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的...
js--- 动态加载checkbox的onclick事件
<br /><html><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html
Jquery ajax在select中动态加载option并且添加点击事件
select中动态加载option并且添加点击事件jsp代码:<script type="text/javascript"> $(function(){ findCenterName(); }); </script> <body> <select id="centerNameSelect" > </body> js代码:fun
html5动态加载图片和加载视频
这两在做一个动态加载图片的东西,有点类似QQ发说说里面附带图片的那种,经过测试可以任意添加、删除,然后该删除的位置被后一位自动填充,还有一个bug,就是最后一个图片的控件没做处理,删掉最后一个就会导致添加不能成功。加载本地视频(google浏览器)和加载手机视频(android和ios)经过测试,在android手机上播放视频出问题了(播放地址无效),具体原因还在研究当中,有知道朋友可以告诉我一下
jquery的点击事件,非动态加载点击与动态加载点击
jquery的点击事件,非动态加载点击与动态加载点击写法不同1.非动态加载点击&amp;lt;div id=&quot;clickdemo&quot;&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;1&amp;lt;li&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/div&amp;gt;点击1触发 $(&quot;#clickdemo ul li&quot;).on(&quot;click&quot;,function
jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前的版本中用的是live()方法,但是live()方法在1.7中已经不建议使用,1.9中删除了这个方法 live()方法适用于匹配选择器的当前及未来的元素(例如有脚本创建的新元素) 重点是自jq
javascript中为动态生成的元素添加事件
近期在开发项目中,遇到一个问题,就是给动态生成的元素添加事件,用平常使用的方法添加不上,废话不多说,上代码: &amp;lt;div id=&quot;mydiv&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; var html = &quot;&amp;lt;div class='child'&amp;gt;我是动态生成的&amp;lt;/div&amp;gt;&quot; $(&quot;#mydiv&quot;).html(ht
js动态添加元素为何 点击事件无效
本来觉得不用提的,但是发现最近几个朋友在提,而且新来的小兄弟也有点迷糊这个,所以就简单说说, 看看下面的代码: .a {width: 100px;height: 100px; background: #000;margin: 10px; } 展示 增加 function showbtn(){ al
js动态创建a标签并触发href事件
背景 js调用第三方公司提供的客户端,如果客户端未启动,则需要自动启动客户端,客户端启动方式为a标签,href指定本地协议链接 解决思路 客户端未启动,则动态创建a标签启动客户端,然后初始化客户端数据 关键代码 var a = document.createElement('a'); a.setAttribute('href', href); a.setAttribute('targe...
动态获取数据点击事件不生效的解决办法
html:   &amp;lt;div class=&quot;list-click&quot;&amp;gt;点击我&amp;lt;/div&amp;gt; css:     .list-click { cursor: pointer;//IOS失效时给点击的元素添加这个属性 } script:     $(document).on('click',&quot;.list-click&quot;,function(e){ ...
关于jquery动态加载li时点击事件无法加载的问题
一开始做个操作栏,如图: 点击角色管理,弹出下拉框,在点击收起,点击增加角色,会通过iframe加载页面,页面样式为: 角色管理 增加角色 模块管理
IOS下动态加载数据点击事件失效
动态数据的创建与绑定 在实际的开发中,我们常常需要通过动态加载数据,来创建页面的DOM,而且给这些新增的元素添加事件也是不可避免的。 而对于动态数据的事件绑定,就需要明白两个概念,就是目标元素和代理元素(委托元素); (1)目标元素:动态创建的元素,最终click事件需要绑定到该元素 (2)代理元素:动态创建的元素的父级元素,即非动态创建的父元素,比如我们习惯上使用document,b...
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件
示例代码: HTML文件: HTML文件 window.onload=function () { var d=document.getElementById('d'); //内容发生改变,并焦点发生改变,才可以监听到 d.onchange=function () {
全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML
在需要给文档插入大量的html 标记下,通过DOM操作很麻烦,你不仅要创建一系列的节点,而且还要小心地按照顺序把它们接结起来。 利用html 标签 插入技术,可以直接插入html代码字符串,简单、高效! 以下插入html标签相关的扩展已经纳入html5 规范. 1.innerHTML 属性2.outerHTML 属性3.insertAdjacentHTML 方法
javascript动态生成按钮并绑定点击事件
前一个多月公司的前端开发人员离职,公司一直在招前端,基本上每天都有几个来面试的人,就这个面试频率,也才招了一个多月才招到。绝大部分都是死在了一道上机面试提上。题目很基础,但也很考基本功,基本上才3%左右的人做出来。当时我就在想以我的半吊子前端知识挑战一下这个题目。之前一直忙着把Android项目弄上线,修改bug,一直没时间。现在国庆节放假,发了一天时间把前端又看了下,然后理所当然的就写出来了,功
一个不错的HTML5 Canvas多层点击事件监听实例
CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius, fill, stroke) { if (typeof stroke == "undefined") { stroke = true; } if (typeof radius === "undefined") { rad
ajax回调函数动态加载的标签里面js事件不执行
出现原因: 就是在使用ajax来动态的添加HTML标签,并要对添加的标签进行添加js的点击事件,目前我使用的jquery是1.8.3版本,而我使用的是方法是$(".aa").click(function(){});方法,但是ajax页面中已经显示相应的HTML标签,但是所添加的Js点击事件就是不执行。 解决方法: 原因在你为$("#layoutBefore")添加click事件处理程序时,$
给用js动态创建的标签添加事件
不知道大家有没有发现,我们用js动态添加的标签,普通情况就是这样用$("#div").click(function(){}), 但是当我们通过后台返回的参数的时候绑定事件就会失效,后来摸索到了一种方法也是用jqury,代码如下: $(document).on("click","div",function(){ alert("taped") } 就是用事件监听的方法才能绑定事件。
当ajax加载更多的时候,动态生成的html里面的事件无法触发
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库——摘自菜鸟教程(http://www.runoob.com/jquery/event-on.html)。       在做项目的时候有时候遇到加载更多的时候,我们以前的做法是在动态加
解决因JS动态加载的页面的事件失效问题
最近写的页面都是获取后台数据之后,用JS动态写入的,所以时常会遇到checkbox或radio等控件的点击失效问题。$(function() { $('input[type=&quot;radio&quot;]').click(function() { var i = $('input[type=&quot;radio&quot;]:checked').val() alert(i) });});像这样的写法,统统失效。原因大概是cs...
AJAX动态创建HTML元素click事件无效
解决办法:将click事件绑定到body元素下面(缺点:body上事件绑定多了,页面受不了) $("body").on("click",".freeLook,.subBox span",function(){ $('#layer').removeClass('access-hide'); }); $("body").on("click",".appoint_cancelbtn",
js模板加载script模板如何绑定事件以及事件属性的解决办法
在html页面上有一段script的模板,给a标签添加绑定click事件 <script type="text/x-handlebars-template" id="waterfall-tpl"> {{#result}} <div class="item"> <a href="javascript:;" data
使用js实现点击事件
这个项目实现一个页面上的3*3的格子,点击每个格子,改变其背景颜色。 效果如下: 1.首先在HTML文件的标签中创建一个表格,背景颜色是红色: ①使用css文件: 首先在WebRoot的文件夹下创建一个CSS文件夹,创建一个index.css文件 写入如下代码: td{ width:200px; height:200px; font-size: 25px;
jQuery为动态添加的新元素绑定点击事件
1.首先如何用jQuery动态添加a标签: for (var index=0; index<5; index++){ var h = '动态添加点击事件'; $(h).appendTo($(".menu_list .ups")); } 动态添加后效果: 2.为新添加的a标签添加点击事件(1.7后用.on()方法实现): $(function(){ $(".menu_list
通过js动态为标签元素添加点击事件
最近遇到了,就研究了下,总结了下: 我所知道的有如下几种方式: var submitSpan = document.getElementById("submitSpan"); 第一种 submitSpan.onclick = function () { phoneLogin();
前端js中动态添加的元素不能触发绑定事件解决方法
问题描述:在页面选择关键词时,需要将关键词元素绑定点击事件使同一类型的关键词只有一个固定class,使其随点击更换,目的是为了让这一类型的关键词的值可以由class获取。在原本写死的关键词上绑定的事件是可用的,但是换成动态加载后发现只能适用于写死的情况。很无奈,在网上搜索一番后花了点时间终于解决了,下面奉上。  参考文章:https://blog.csdn.net/qq_35129893/art...
h5里不规则图形的点击事件的解决方案
DW map就这么简单。
javascript动态生成img标签
---css img{width: 10px;height: 10px;background-color: green;} --html 标题 添加图片 ---js function createImg(){ //1.创建img节点 var imgNode=document.createElement('img'); var div
菜单栏点击事件,用ajax加载页面
&amp;lt;body&amp;gt; //定义菜单栏 &amp;lt;div tabindex=&quot;1&quot; class=&quot;sidebar&quot; id=&quot;sidebar&quot; style=&quot;cursor: url(https://cdnjs.cloudflare.com/ajax/libs/slider-pro/1.3.0/css/images/openhand.cur),n-resize; -ms-overflow-x: h...
javascript--动态添加表格(三种方法)
题目:用户输入行和列,动态创建表格:   方法一:createElement(),创建标签(缺点:每创建表格在原来的基础上新建表格)   &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;动态添加表格-createEl
动态添加到页面的内容怎么写他们的点击事件
比如我有个表格里面的内容都是通过访问接口获取到的,而页面的html只有最外层的table。&amp;lt;table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;  id=&quot;contaUnselectTableList&quot;&amp;gt;&amp;lt;/table&amp;gt;那么里面元素tr的点击事件,你用$(&quot;#contaUnselectTableList tr&quot;
动态添加图片并绑定删除事件
动态添加图片并绑定删除事件 Delete Delete #container { overflow:auto; } .image { float:left;position:relative; margin:10px} .image img{width:200px;height:160px} a.delete { display:non
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 数据库创建课程表代码 数据库创建课程表代码