从后台获取的数据渲染到页面中的dom操作

时间:2022-10-26 17:47:36

很多情况下页面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操作的更多相关文章

  1. .net dataGridView当鼠标经过时当前行背景色变色;然后【给GridView增加单击行事件,并获取单击行的数据填充到页面中的控件中】

    1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...

  2. Flask04 后台获取请求数据、视图函数返回类型、前台接受响应数据

    1 后台获取请求数据 1.1 提出问题 前台发送请求的方式有哪些 后台如何获取这些请求的参数 1.2 前台发送请求的方式 GET.POST.AJAX 点睛:如果不指定请求方式,浏览器默认使用GET请求 ...

  3. jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildS ...

  4. jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。

    从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...

  5. .net后台获取DataTable数据,转换成json数组后传递到前台,通过jquery去操作json数据

    一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){  DataTable dt = DBhepler.GetDataT ...

  6. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  7. 微信小程序请求wx.request数据,渲染到页面

    先说一下基本使用.官网也有. 比如说你在App.js里面有这些变量.想修改某些值. data: { main_view_bgcolor: "", border: "&qu ...

  8. Vue获取后端数据 渲染页面后跳转

    主页面 <template> <div> <ul v-for="item in courseList"> <router-link :to ...

  9. Vue2 异步获取的数据&lpar;通过ajax&rpar;获取的数据 渲染到dom上

    页面dom结构如下 <ul class="user" id="app"> <li><span>姓名: </span&g ...

随机推荐

  1. nandflash的读写&lpar;2440&rpar;

    说明: 根据物理结构上的区别 , NandFlash主要分为如下两类:1)•SLC (Single Level Cell): 单层式存储2)•MLC (Multi Level Cell): 多层式存储 ...

  2. 关于Delphi中多线程传递参数的简单问题

    http://bbs.csdn.net/topics/390513469/ unit uThread; interface uses Classes; type Th = class(TThread) ...

  3. Unity Project Wizard &lpar;最近打开的项目记录&rpar;

    最近打开工程列表 当用Unity打开过的项目越来越多之后,在最近打开项目记录框中就会变的很长,那么如何才能删除最近打开的记录呢? Unity4.x最近打开的工程记录 Unity5.x最近打开的工程记录 ...

  4. 让sql语句不排序&comma;按照in语句的顺序返回结果

    SELECT * FROM EVENT WHERE eventId IN(443,419,431,440,420,414,509)  ORDER BY INSTR(',443,419,431,440, ...

  5. PHP回调函数的几种用法

    PHP回调函数的实现方法 目录 前言      全局函数的回调      类静态函数的回调      对象的方法的回调      PHP事件模型(观察者模式)的实现思路    前言 最近在开发一个PH ...

  6. golang编码转换

    在网上搜索golang编码转化时,我们经常看到的文章是使用下面一些第三方库: https://github.com/djimenez/iconv-go https://github.com/qiniu ...

  7. 剑指offer系列58---把数组排成最小的数

    [题目]输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个. * 例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323.[思路]1 ...

  8. FileStream的使用

    一.写入文件 string strContent = textBox2.Text.ToString(); //创建文件流(文件路径,文件操作,创建) using (FileStream fs = ne ...

  9. 清北学堂Day2

    算数基本定理: 1.整数及其相关 2.唯一分解定理 对于任意的大于1的正整数N,N一定能够分解成有限个质数的乘积,即 其中P1<P2<...<Pk,a1,a2,...,ak>= ...

  10. ubuntu14&period;04 Samba服务无法访问 网络名不再可用的问题

    参考链接 : https://blog.csdn.net/liuyixjtu/article/details/54575514