打开页面同时jquery异步加载生成新dom并为dom注册事件

最新推荐文章于 2021-02-04 19:08:20 发布

Luyna

最新推荐文章于 2021-02-04 19:08:20 发布

阅读量3.3k

点赞数

分类专栏： JavaScript/JQuery

本文链接：https://blog.csdn.net/muziruoyi/article/details/44177085

版权

该博客探讨了在页面加载时，如何处理静态和动态生成的DOM节点的点击事件。由于AJAX异步加载可能导致动态生成的节点事件绑定失效，解决方案是在AJAX返回后对新DOM节点重新注册事件，通过函数封装点击事件处理以避免代码重复。

摘要由CSDN通过智能技术生成

实现功能：页面数据一部分是静态写入的dom节点，一部分是通过ajax读取数据库内容动态加载生成的dom节点,两者都需要添加单击的事件处理。
问题：如果添加单击事件的js代码放在ajax处理代码之下，由于ajax加载是异步的，所以在生成页面的时候，ajax请求会与添加单击事件的js代码同时执行，这样则会出现问题：部分静态的dom节点单击事件正常，但是动态加载添加的部分dom节点没有添加成功。
解决：在ajax返回函数中添加完dom节点后，对新生成的dom节点重新注册事件。

<li class= "select-list">
      <dl id ="select1">
             <dt >原产国： </dt >
              &l

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Luyna

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

dom刷新问题再探讨

wind__snow的专栏

11-16

3632

之前写过一篇关于dom刷新的东西，感觉写得不太好，重新梳理一下，又写了一篇用js更新dom是web系统中经常出现的场景，但是有时候可能会遇到这样的情况，在更新dom之后还执行了一段运行时间可能比较长的js代码，这时你会发现，你更新的dom不会立刻在页面显现出来，而要等所有js都执行完之后才能出现。以最近支持的一个项目为例，点击页面一个按钮后执行一段复杂的计算逻辑，虽然现代浏览器执行js的效率比

jQuery异步加载数据并添加事件示例

10-25

对从数据库去的数据动态生成树形栏进行增删改查操作，可是用$(".XX").click();方法是不行的，关于这个问题的解决方法如下

参与评论您还未登录，请先登录后发表或查看评论

JavaScript文档加载顺序和事件绑定

Live and Learn

05-16

1572

为了保证网页代码层次清晰，便于管理，一般HTML中只体现网页结构，具体的行为处理通过JS实现，样式则通过CSS文件管理。在以上原则下通过JS实现行为时，一定要注意文档加载过程中，执行JS代码的时机。页面加载过程有两个事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。（可以说：ready 在onloa

Jquery的dom操作、事件、遍历以及异步请求

weixin_45960525的博客

03-04

307

Jquery的dom操作属性操作: attr -> attribute attr():设置/获取属性值 removeAttr():移除属性内容操作: text():往标签中插入内容(设置/获取) html():往标签中插入内容 val():设置/获取输入框的内容代码展示： <script> // 属性操作 func...

DOM页面加载和Jquery加载页面有何区别

tjyinuo2011的专栏

12-22

332

| window.onload这个事件必须要等所有关联文件加载完成后才会加载.例如css，js文件等 $(document).ready();这个事件只要html的dom加载完毕时即可执行，所以这种加载方式执行速度快 | window.onload事件指定多个事件处理程序，那么页面加载后会执行最后一个事件处理程序，即window.onload设置多个处理程序，会覆盖之前的处理程序 $(d

jQuery为DOM动态追加事件的方法

flora8113的专栏

12-12

1101

append插入的dom绑定事件：最初是这样写的：$(".btn-open").on("click", function () { alert($(this).text()); })当然这样是不起作用的，因为在document reday后，.btn-open 这个元素根本还不存在呢，列表没绑定，事件当然也帮不上的！然后是这样的：$(".table").on("c

自写的jQuery异步加载数据添加事件

10-25

本文主要介绍了使用jQuery异步加载数据并添加事件处理的一些方法，特别是自写的jQuery异步加载数据添加事件的方法。首先，我们需要了解在不同版本的jQuery中，如何选择合适的方法来处理异步加载数据后的事件绑定。...

jQuery使用zTree插件实现树形菜单和异步加载

10-22

### jQuery使用zTree插件实现树形菜单和异步加载的相关知识点 #### 1. jQuery与zTree插件介绍 **jQuery** 是一个快速、小巧、功能强大的 JavaScript 库。它通过提供一种简捷的方式来访问和操作文档对象模型（DOM）...

jQuery异步加载分页代码.zip

最新发布

11-02

本压缩包"jQuery异步加载分页代码.zip"提供了一种利用jQuery来实现异步加载分页的解决方案，主要涉及到的知识点包括jQuery基础、AJAX异步请求和分页逻辑处理。 1. **jQuery基础**：jQuery是一个广泛使用的...

Vue 异步事件更新 & 异步Dom更新解决方案

章鱼小丸子

01-30

1万+

Vue 异步事更新件 & 异步Dom更新解决方案 Vue 异步事更新件异步Dom更新解决方案 Question Action 1 正确姿势 2 一个试验 3 还有困惑 1. Question 最近遇到一个有点别扭的需求。进入一个子页面，需要四个接口拿到四份数据【a,b,c,d】。其中a,b正巧父级拿到过，在父级页面上用v-if指令保证a和b存在，

jquery中each循环生成的dom绑定点击事件中的参数问题_Django:前后端异步加载数据(循环大法)...

weixin_39939510的博客

02-04

294

距离上一次发文过去两个月，这段时间将Django，Bootstrap，JQuery收入囊中开始写Django的一些笔记，祭奠那掉了一地的头发关于Django项目创建和基础介绍，本篇不做介绍，主要介绍前后端异步交互数据，怎样提交前端的表单数据给后端，并储存到数据库。网上大部分资料都是使用JQuery通过ID选择器，获取DOM元素的值组成data，然后使用ajax传递。大致是这样的：在后端使用get获...

jquery怎么创建一个img标签

weixin_30622107的博客

05-30

1123

有几种方法但都需要你指定一个节点根据这个节点进行添加如现有一节点Id为pr：一，向该节点内部后方添加：1 $("#pr").append("<img src=''/>");2 $("<img src=''/>").appendTo("#pr");二，向该节点内部前方添加：1 $("#pr").prepend("<img src=''/>");2...

js open打开新窗口操作父窗口

qq_33344500的博客

06-22

1263

父窗口 function myMenu(url,num) { var obj = new Object(); url=url+"&pUserId="+num; openwindow(url, obj, 420, 480);

Ajax与DOM实现动态加载

xingoo

03-17

186

Ajax与DOM实现动态加载首先说下问题背景：想要通过异步请求一个文本文件，然后通过该文件的内容动态创建一个DOM节点添加到网页中。基于这个需要了解：　　1 DOM如何动态添加节点　　2 Ajax异步请求　　3 Chrome浏览器如何处理本地请求　　DOM如何动态添加节点　　想要动态的添加节点，就需要良好的理解DO...

js跳转新页面，指定div加载新页面