很多情况下页面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. 使用logstash拉取MySQL数据存储到es中的再次操作

    使用情况说明: 已经使用logstash拉取MySQL数据存储到es中,es中也创建了相应的索引,也存储了数据.假若把这个索引给删除了,再次进行同步操作的话要咋做,从最开始的数据进行同步,而不是新增的 ...

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

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

随机推荐

  1. java 多线程(生产者消费者)

    转 https://www.oschina.net/code/snippet_111708_25438 这个问题挺经典,我这个解法的本质在于将问题抽象为生产者消费者模型,但是是一个特殊的生产者消费者模 ...

  2. uva-10282-枚举

    题意:语言翻译, 直接map即可 #include "pch.h" #include <string> #include<iostream> #includ ...

  3. error C2011: “timespec”:“struct”类型重定义

    error C2011: “timespec”:“struct”类型重定义 C++ pthread pthread.h 中的 timespec 和time.h 中的 结构定义重复了 ,同时两个头文件中 ...

  4. 《算法》第五章部分程序 part 1

    ▶ 书中第五章部分程序,包括在加上自己补充的代码,字母表类,字符串低位优先排序(桶排) ● 字母表类 package package01; import edu.princeton.cs.algs4. ...

  5. spring 之 depends-check

    我们知道 spring xml 配置中 bean 的子元素 property 是按照 setXxx(SomeType someParam) 方式来设值的,换句话说, 是根据属性的setter 方法, ...

  6. <转载>Bootstrap 入门教程 http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html 系列

    Bootstrap建立了一个响应式的12列格网布局系统,它引入了fixed和fluid-with两种布局方式.我们从全局样式(Global Style),格网系统(Grid System),流式格网( ...

  7. 【3-28】JavaScript的DOM操作

    一.定义:DOM是一种用于HTML和XML文档的编程接口. 二.Windows对象操作: (一)Window.open(URL,name,features,replace) 1.URL;页面地址 2. ...

  8. CentOS 7 救援模式启用网卡及重新获取IP地址

    重新自动获取IP地址命令: dhclient 启用网卡命令 ifconfig ens33 up https://blog.csdn.net/hongmin118/article/details/782 ...

  9. Flex学习笔记--多层菜单按钮

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  10. Appium-We wanted {"required":["value"]} and you sent ["text","sessionId","id","value"]

    APK 链接:https://pan.baidu.com/s/17oeTM1qA0QjPBqLh6pS0Yg 提取码:s9ru # coding:utf-8from appium import web ...