动态添加html事件无响应
问题描述:在页面中动态使用js添加的html中设置了onclick事件,生产页面后点击事件无效并提示:Cannot read property 'xxx' of undefined
如:
$('.test').append("<li><a href='javascript:void(0);' onclick=\"search.fn.HotSearch('" + v + "')\">" + v + "</a></li>");
search.fn={
HotSearch: function (key) {
$("#_search_box").val(key);
search.fn.DoSearch(true);
},
DoSearch:function(istrue){
}
}

问题分析:造成这一情况的主要原因在于dom文档加载完毕后,js会因找不到元素无法对该元素注册事件侦听,因此;即使后来将dom元素动态添加进去,js无效。 如果想对这种动态即时添加的dom元素本身注册事件侦听,可采取在动态添加dom元素后,再对该元素动态注册事件侦听。
除了通过元素id等各种通过属性获取对应元素并执行事件绑定的方式外,这里提供一种另类的方式:
var html = "<li><a href='javascript:void(0);'>" + v + "</a></li>";
var obj = $(html);
obj.bind('click', function () { search.fn.HotSearch(v); });
$('.test').append(obj);
动态添加html事件无响应的更多相关文章
- android stuido 在线安装svn插件,添加版本库无响应
问题:android stuido 中在线安装svn插件,添加版本库无响应. 原因: 由于android stuido 版本较高,在线安装1.6x 版本的svn,添加版本库一直没有响应,最后卡死.. ...
- jq动态添加onclick事件在谷歌中不起作用
$("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...
- MFC 单文档中动态添加菜单项和响应菜单事件
新建一个单文档程序 在查看菜单项中增加两个子菜单,分别为隐藏工具栏(ID_HIDE),新建菜单(ID_NEWMENU) 在Resource.h中增加一个ID_NEWMENU宏 #define ID_N ...
- 关于cocostudio动态添加控件触摸响应无效的学习
time:2015/04/19 1. 描述 * 把studio制作的ui加载之后,动态添加事件(比如说,单点触摸),结果回调函数(eg:onTouchBegan等)根本没有响应! * 另外,网上有朋友 ...
- XE7 - Image的双击事件无响应,咋整?(已解决)
今天折腾了好一会,本想做个类似于手机相册的功能,显示SQLite数据库中的图片,然后继续做一些处理.哪成想,写个测试例子时就被卡住了:简单的往窗体上拖放了一个TImage和一个TLabel,没有修改任 ...
- vue动态添加当前事件下的class
html部分<div class="star"> <span v-for="(item,index) in 5" @click="c ...
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
- 注意:MainActivity的oncreate方法里不要再inflate布局了(MainActivity里的点击事件无响应)
activity_main已经通过setContentView(R.layout.activity_main);设置给MainActivity, 不要再inflate出新布局,然后findviewby ...
- JQuery 动态添加onclick事件
$('#div_id').click(function(){ show(1,2,this); });
- 当前页面刷新和动态添加控件的jquery事件绑定on
当前页面刷新(console): location.reload() 给动态添加的控件添加js事件(委托): <ul> <li>菜单一</li> <li> ...
随机推荐
- 一文彻底弄懂JUC工具包的CountDownLatch的设计理念与底层原理
CountDownLatch 是 Java 并发包(java.util.concurrent)中的一个同步辅助类,它允许一个或多个线程等待一组操作完成. 一.设计理念 CountDownLatch 是 ...
- Chrome 浏览器 131 版本新特性
Chrome 浏览器 131 版本新特性 一.Chrome 浏览器 131 版本新特性 1. 在 iOS 上使用 Google Lens 搜索 自 Chrome 126 版本以来,用户可以通过 Goo ...
- CodeForces - 1398C Good Subarrays
CodeForces - 1398C 挺简单的题目,但是没有想到还是整理一下 方法1 把每个元素都减1,那么满足题意的就是一段和的值是0,然后维护前缀和,如果发现这个前缀和之前出现过,就说明有满足题意 ...
- javaScript 的面向对象程序
理解对象 属性类型 数据属性(数据属性包含一个数据值的位置,这个位置可以读取和写入值,数据属性有4描述) [Configurable]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属 ...
- 推荐一款轻量级且强大的 Elasticsearch GUI : elasticvue
推荐一款轻量级且强大的 Elasticsearch GUI : elasticvue 很多同学都是用过 Elasticsearch 的 GUI 工具 Kibana ,但 Kibana 相对比较重,这篇 ...
- vue3版本下element-plus和antd-vue选哪个更好一些?
Vue 3 发布后,各家第三方库开始陆续重构并支持 Vue 3 ,国内两大知名框架 Element Plus 和 Ant Design Vue 也相续发布新版支持 Vue 3.到底应该怎么选择呢? E ...
- 武装你的WEBAPI-OData使用Endpoint
本文属于 OData 系列文章 Introduction 更新: 由于新版的 OData 已经默认使用了 endpoint 模式(Microsoft.AspNetCore.OData 8.0.0),不 ...
- Linux FTP 服务搭建
Linux FTP 服务搭建 1.安装vsftp 1.1.使用yum进行安装vsftp [root@localhost ~]# yum -y install vsftpd 1.2.配置文件目录 [ro ...
- Go channel 原理
作用 Go 语言的 channel 是一种 goroutine 之间的通信方式,它可以用来传递数据,也可以用来同步 goroutine 的执行. chan 是 goroutine 之间的通信桥梁,可以 ...
- Qt/C++音视频开发49-推流到各种流媒体服务程序
一.前言 最近将推流程序完善了很多功能,尤其是增加了对多种流媒体服务程序的支持,目前支持mediamtx.LiveQing.EasyDarwin.nginx-rtmp.ZLMediaKit.srs.A ...