从后台获取的数据渲染到页面中的dom操作
很多情况下页面dom都是从后台拼接字符串添加生成的新的dom元素,在编辑器中不能看到,只能通过检查看到页面的dom结构,但是这时候会发生一个问题,就是如果使用jQuery无法进行dom操作,事件和方法都没有反应,我以前是使用
$ (document).on('DOMNodeInserted',function () {
{
要操作的后台获取的数据的字符串拼接的新的dom元素
}
})
使用这个方法有一个弊端,就是如果该dom元素是数组形式拼接的dom,如果li元素,如果这些li元素都有点击事件这样如果使用这个方法,没个li都会发生相应的点击事件
2018年08.12就出现了这个问题,那个是tr表格元素,需要点击每个tr但是我使用数组循环做出的,然后点击时候,发行所有的tr都触发了点击事件,后来使用
$('body').on("click","table.first tbody tr", function () {
要操作的代码
});
这样才有事件代理将所有的tr由上层元素body来代理,这样上面出现的问题也就解决了,非常完美,以后也尽量使用这个方法来触发新渲染出来的dom元素的点击和方法。
从后台获取的数据渲染到页面中的dom操作的更多相关文章
- .net dataGridView当鼠标经过时当前行背景色变色;然后【给GridView增加单击行事件,并获取单击行的数据填充到页面中的控件中】
1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...
- Flask04 后台获取请求数据、视图函数返回类型、前台接受响应数据
1 后台获取请求数据 1.1 提出问题 前台发送请求的方式有哪些 后台如何获取这些请求的参数 1.2 前台发送请求的方式 GET.POST.AJAX 点睛:如果不指定请求方式,浏览器默认使用GET请求 ...
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 function BuildS ...
- jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- .net后台获取DataTable数据,转换成json数组后传递到前台,通过jquery去操作json数据
一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){ DataTable dt = DBhepler.GetDataT ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- 微信小程序请求wx.request数据,渲染到页面
先说一下基本使用.官网也有. 比如说你在App.js里面有这些变量.想修改某些值. data: { main_view_bgcolor: "", border: "&qu ...
- 使用logstash拉取MySQL数据存储到es中的再次操作
使用情况说明: 已经使用logstash拉取MySQL数据存储到es中,es中也创建了相应的索引,也存储了数据.假若把这个索引给删除了,再次进行同步操作的话要咋做,从最开始的数据进行同步,而不是新增的 ...
- Vue获取后端数据 渲染页面后跳转
主页面 <template> <div> <ul v-for="item in courseList"> <router-link :to ...
随机推荐
- 2-scala集合
1.集合的数据结构: array.seq .set .map(映射) 2.集合分类 集合分为可变集合和不可变集合(除元组外,元组没有可变和不可变) scala.collection.immutable ...
- 傅立叶变换系列(五)快速傅立叶变换(FFT)
说明: 傅里叶级数.傅里叶变换.离散傅里叶变换.短时傅里叶变换...这些理解和应用都非常难,网上的文章有两个极端:“Esay” Or “Boring”!如果单独看一两篇文章就弄懂傅里叶,那说明你真 ...
- Java压缩图片的实现类
package com.function; import java.awt.geom.AffineTransform; import java.awt.image.AffineTransformOp; ...
- 3.HTML+CSS 制作个太阳
效果地址:https://codepen.io/flyingliao/pen/moPBwR HTML code: <div class="sun"></div&g ...
- cookie、localStorage、sessionStorage和会话控制机制
简介 cookie cookie的内容主要包括:名字Name.值Value.域Domain.路径Path.过期时间Expires/Max-Age.大小Size.HTTP.Secure.SameSite ...
- 关于sql链接超时的问题
也许你会说,我在连接字符串中已经 设置了 Connect Timeout=80000 ,并且数据库中超时连接也是设置的值是一个很大的值.为啥到了30秒,仍然超时了呢?? 这是因为: ...
- 【转】Intro to ShockBurst/Enhanced ShockBurst
原地址https://devzone.nordicsemi.com/b/blog/posts/intro-to-shockburstenhanced-shockburst Wireless PC ac ...
- Notification html5 的通知api
https://developer.mozilla.org/zh-CN/docs/Web/API/notification 使用方法 var notification = new Notificati ...
- Tomcat 配置Https
https://www.cnblogs.com/wanghaoyuhappy/p/5267702.html JDK1.8 keytool 生存证书 C:\keys\tomcat.keystore 1: ...
- Dubbo的优化 --- 开发时使用
开发时的三个优化: 1.开发者在本地开发的时候启动Dubbo比较麻烦,所以采用直接连接的配置: 2.开发者本地开发时会打断点调试,会超过Dubbo默认的超时时间1s,所以需要全局设置超时时间: 3.开 ...