关于AJAX异步加载节点无法触发点击事件问题的解决方式
做练习的过程中遇到一个问题,使用AJAX异步新增一个节点,无法触发点击事件,经过查阅之后知道一个方式,使用JS的委托事件,在此做一个记录。
$(document).on('click', '.recruit-body', function () {})
其中 on ()事件,在菜鸟联盟上有一段解释 使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。所以当Ajax异步新增的节点,同样适用于它。
记录一下 on() 与 click() 事件的区别:
二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。
关于AJAX异步加载节点无法触发点击事件问题的解决方式的更多相关文章
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- ajax异步加载问题
使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.
- Scrapy爬虫框架教程(四)-- 抓取AJAX异步加载网页
欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...
- ztree插件的使用及列表项拖拽的实现(jQuery)+异步加载节点数据
为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...
- jQuery的AJax异步加载
主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...
- 【jquery】 在异步加载的元素上绑定事件
最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...
- Ajax 异步加载
AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...
- 使用Ajax异步加载页面时,怎样调试该页面的Js
前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...
随机推荐
- vim直接编辑远程文件
本文由Suzzz原创,发布于http://www.cnblogs.com/Suzzz/p/4116341.html,转载请保留此声明. Linux环境下 vim scp://user@hostIP/P ...
- [转]HTMl中Meta标签详解以及meta property=og标签含义
meta是用来在HTML文档中模拟HTTP协议的响应头报文.META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之 ...
- 洛谷 3803 【模板】多项式乘法(FFT)
题目:https://www.luogu.org/problemnew/show/P3803 第一道FFT! https://www.cnblogs.com/zwfymqz/p/8244902.htm ...
- PKU campus 2018 A Wife——差分约束?/dp
题目:http://poj.openjudge.cn/campus2018/A 有正规的差分约束做法,用到矩阵转置等等. 但也有简单(?)的dp做法. 有一个结论(?):一定要么在一天一点也不选,要么 ...
- walle部署系统的使用
在项目开发的时候要管理各种开发 测试 线上环境的代码 部署 回滚等操作 这里可以使用walle walle官网:http://www.walle-web.io/ 学习安装:https://blog.c ...
- Vue项目开启步骤
## Build Setup # install cnpm //安装淘宝CNPM镜像npm install -g cnpm --registry=http://registry.npm.taobao. ...
- AngularJS:SQL
ylbtech-AngularJS:SQL 1.返回顶部 1. AngularJS SQL 在前面章节中的代码也可以用于读取数据库中的数据. 使用 PHP 从 MySQL 中获取数据 AngularJ ...
- Oracle 备份与恢复基础
Oracle 备份与恢复基础 :三思笔记 备份与恢复 A whole database backup is either a consistent backup or an inconsistent ...
- Codeforces Round #310 (Div. 2)556ABCDE
https://github.com/Anoxxx/OI/blob/master/Anoxx/Contest10 github自取
- strophe与openfire模拟的XMPP简单hello程序
/* * 参考<XMPP高级编程+使用JavaScript和jQuery>第三章例子. * 我修改了作者的XMPP服务器到本地的openfire.JavaScript跨域请求,使用Ngin ...