问题描述:在页面中动态使用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事件无响应的更多相关文章

  1. android stuido 在线安装svn插件,添加版本库无响应

    问题:android stuido 中在线安装svn插件,添加版本库无响应. 原因: 由于android stuido 版本较高,在线安装1.6x 版本的svn,添加版本库一直没有响应,最后卡死.. ...

  2. jq动态添加onclick事件在谷歌中不起作用

    $("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...

  3. MFC 单文档中动态添加菜单项和响应菜单事件

    新建一个单文档程序 在查看菜单项中增加两个子菜单,分别为隐藏工具栏(ID_HIDE),新建菜单(ID_NEWMENU) 在Resource.h中增加一个ID_NEWMENU宏 #define ID_N ...

  4. 关于cocostudio动态添加控件触摸响应无效的学习

    time:2015/04/19 1. 描述 * 把studio制作的ui加载之后,动态添加事件(比如说,单点触摸),结果回调函数(eg:onTouchBegan等)根本没有响应! * 另外,网上有朋友 ...

  5. XE7 - Image的双击事件无响应,咋整?(已解决)

    今天折腾了好一会,本想做个类似于手机相册的功能,显示SQLite数据库中的图片,然后继续做一些处理.哪成想,写个测试例子时就被卡住了:简单的往窗体上拖放了一个TImage和一个TLabel,没有修改任 ...

  6. vue动态添加当前事件下的class

    html部分<div class="star"> <span v-for="(item,index) in 5" @click="c ...

  7. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  8. 注意:MainActivity的oncreate方法里不要再inflate布局了(MainActivity里的点击事件无响应)

    activity_main已经通过setContentView(R.layout.activity_main);设置给MainActivity, 不要再inflate出新布局,然后findviewby ...

  9. JQuery 动态添加onclick事件

    $('#div_id').click(function(){ show(1,2,this); });

  10. 当前页面刷新和动态添加控件的jquery事件绑定on

    当前页面刷新(console): location.reload() 给动态添加的控件添加js事件(委托): <ul> <li>菜单一</li> <li> ...

随机推荐

  1. Flink 状态编程

    概念 在Flink架构体系中,有状态计算可以说是Flink非常重要的特性之一 Flink优势: 支持高吞吐.低延迟.高性能 支持事件时间Event_time概念 支持有状态计算 有状态计算是指: 在程 ...

  2. cmu15545-数据存储(Database Storage)

    蓝图 数据库自己管理磁盘数据和缓冲区,而不是通过操作系统管理(Os is not your friend.). 三层视图 数据库以页(page)为存储数据的基本单位,文件(file)是一系列页的集合, ...

  3. 基于Java+SpringBoot心理测评心理测试系统功能实现七

    一.前言介绍: 1.1 项目摘要 心理测评和心理测试系统在当代社会中扮演着越来越重要的角色.随着心理健康问题日益受到重视,心理测评和心理测试系统作为评估个体心理状态.诊断心理问题.制定心理治疗方案的工 ...

  4. Open-RAG:将开源LLM模型集成为高效RAG模型 | ENMLP'24

    本文是对公开论文的核心提炼,旨在进行学术交流.如有任何侵权问题,请及时联系号主以便删除. 来源:晓飞的算法工程笔记 公众号,转载请注明出处 论文: Open-RAG: Enhanced Retriev ...

  5. typescript 安装调试(二)

    一.安装ts-node 今天介绍另外一种更加方便的ts调试方式,需要安装以下几个库 第一个库是ts-node,这个库可以直接运行ts文件无需实时编译成js文件后再运行 安装命令  npm i ts-n ...

  6. TreeMap源码分析——基础分析(基于JDK1.6)

    常见的数据结构有数组.链表,还有一种结构也很常见,那就是树.前面介绍的集合类有基于数组的ArrayList,有基于链表的LinkedList,还有链表和数组结合的HashMap,今天介绍基于树的Tre ...

  7. Xdebug+Phpstorm远程调试

    开发环境: 本地 Windows10 日常开发使用的环境 装有PHPStorm 远程主机 Linux 服务器 装php-fpm/nginx等所有开发依赖环境 本地可以访问远程主机 但远程主机无法访问本 ...

  8. Blazor 组件库 BootstrapBlazor 中Carousel组件介绍

    组件介绍 Carousel 走马灯的作用是在有限空间内,循环播放同一类型的图片.文字等内容. 代码如下: <Carousel Images="@Images" Width=& ...

  9. Qt 在线程中invokeMethod采用QueuedConnection模式,调用带指针参数槽,实际不会调用

    widgetObject有操函数Test: void Test(int *v); 在线程中调用Test,会被忽略,实际不会调用. QMetaObject::invokeMethod(widgetObj ...

  10. codeforces 1978 D. Elections

    题目链接 https://codeforces.com/problemset/problem/1978/D 题意 对于每个测试用例,共有 \(n\) 个人,每个人的号码分别是 \(1,2,...,n\ ...