在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件。

其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最好的方式还是通过给类名绑定一个click事件。

方法一:使用live:

live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

代码示例:

$('.demo1').live('click', function(){
alert('OK');
});

  

方法二:使用on:

可以通过on方法绑定事件,可以绑定到它的父级或者body中

代码示例:

$("#demo").on('click','.demol',function(){
alert('OK')
});

  

js中 ajax动态新增节点无法触发点击事件的更多相关文章

  1. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  2. 关于AJAX异步加载节点无法触发点击事件问题的解决方式

    做练习的过程中遇到一个问题,使用AJAX异步新增一个节点,无法触发点击事件,经过查阅之后知道一个方式,使用JS的委托事件,在此做一个记录. $(document).on('click', '.recr ...

  3. js中怎么为同级元素添加点击事件

    事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...

  4. angular JS中使用jquery datatable添加checkbox点击事件

    'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $s ...

  5. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  6. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  7. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  8. vue中Enter触发登录事件和javascript中Enter触发点击事件

    created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } 在methods中当keyC ...

  9. JS实现按下按键触发点击事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Windows系统 应用或游戏 打开出现0xc000007b错误 解决方法

    1.使用directX修复工具(推荐) 标准版 增强版 标准版备用地址 增强版备用地址 2. 重新安装DirectX 9.0 安装包(安装包体积大) 微软官方离线安装包 摘录CSDN博客 运行游戏时出 ...

  2. 【代码笔记】Web-CSS-CSS盒子模型

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. Dynamics 365 Customer Engagement安装FAQ

    微软动态CRM专家罗勇 ,回复310或者20190308可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 本文参考了包括但不限 ...

  4. installation failed with message INSTALL_FAILED_INSUFFICIENT_STORG

    在安装APK的时候有时候会出现这种错误,原因是卸载之前的APK不彻底,有残余,手动删除android目录下相关的文件.

  5. 随意下载:afinal jar

    刚才用到afinal,下载jar包到处要积分啥的,我花钱下载了,现在免费给兄弟们 链接: https://pan.baidu.com/s/1BmB-06ui1D2BfooUCi6xKg 提取码: m3 ...

  6. 高德地图 Service 创建服务 USERKEY_PLAT_NOMATCH

    在使用高的地图 创建服务的时候 { "errmsg": "USERKEY_PLAT_NOMATCH", "errcode": 10009, ...

  7. 5.4Python数据处理篇之Sympy系列(四)---微积分

    目录 目录 前言 (一)求导数-diff() 1.一阶求导-diff() 2.多阶求导-diff() 3.求偏导数-diff() (二)求积分-integrate() (三)求极限-limit() ( ...

  8. django 创建admin用户名跟密码

    一.django中创建用户名和密码 (venv) D:\project\py37project\Djangopro\Procrm>Python37 manage.py createsuperus ...

  9. 安装指定版本的docker服务

    参考博客:Docker CE 镜像源站 参考博客:docker启动异常driver not supported 1. 说明 之前部署docker服务的时候都是安装最新的docker版本,并使用dock ...

  10. 使用Visual Studio Code进行ABAP开发

    长期以来,我们都使用SAP GUI进行ABAP编码工作,事务代码SE38甚至成了ABAP的代名词. SAP GUI的代码编辑能力和一些专业的IDE比较起来难免相形见绌,为了给开发者们更好的体验,SAP ...