如何在通过knockout数据绑定的DOM元素上添加事件
通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才会出现。如果要在这些DOM元素上面绑定事件,必须再数据绑定完成之后添加事件,而且绑定事件和数据绑定的代码必须写在同一个作用域里。不然添加绑定事件不会成功。
案例 一段AJAX调用成功后绑定数据,并且添加事件的代码(ajax已被封装)
var ViewModel = {
availableCashData: ko.observable(),
assetInfoByCodeData: ko.observable()
}
ko.applyBindings(ViewModel);
function getAssetInfoByCode() {
var dataParams = {
"MethodAlias": "App_GetAssetInfoByCode",
"Parameter": [windcode]
};
ajaxRequest(ajaxUrl, dataParams, function(data) {
if(data && data.State == 0 && data.Data) {
var assetInfoByCode = data.Data;
ViewModel.assetInfoByCodeData(assetInfoByCode);
//点击基金名称重新搜索功能
var fundNameChange = document.querySelector(".fundname-change");
fundNameChange.addEventListener("tap", function() {
gotoUrlWebView('search_page.html?id=' + competitionId+'&origin='+originPage);
});
}
})
};
getAssetInfoByCode();
如何在通过knockout数据绑定的DOM元素上添加事件的更多相关文章
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- dom元素上添加断点(使用dom breakpoint找到修改属性的javascript代码)
使用dom breakpoint能快速找到修改了某一个dom element的JavaScript code位于何处.在Chrome development tool里,选中想要inspect的dom ...
- JS闭包机制实现为DOM元素循环添加事件
HTML代码: <button type='button' class='btn' id='1'>按钮1</button> <button type='button' c ...
- 【jquery】 在异步加载的元素上绑定事件
最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...
- event.target 属性返回哪个 DOM 元素触发了事件。
<ul> <li>list <strong>item 1</strong></li> <li><span>list ...
- 在元素上写事件和addEventListent()的区别
在元素上写事件和addEventListent()的区别1. onclick添加事件不能绑定多个事件,后面绑定的会覆盖前面的.而addEventListener能添加多个事件绑定,按顺序执行.2. a ...
- Jquery 在动态元素上绑定事件
弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" valu ...
- jQuery查看dom元素上绑定的事件列表
jQuery API提供了一种能够查看元素已绑定事件的列表,这个功能在进行功能调试的时候特别有用,尤其确定在代码执行过程中元素绑定的事件是否被更改. 1: jQuery( elem ).dat ...
- ajax获取的数据如何渲染到dom元素上
1.常见的字符串拼接 (对于动态创建的元素添加js时,使用事件委托,利用事件冒泡的原理,把事件添加到父级元素上,触发执行效果) $("ul").on('click','li',fu ...
随机推荐
- ASP.NET 开发者 开始学习ASP.NET Core 2吧
. NET Core 从2016年6月28日发布,过去了将近一年的时间,但是在工作中发现大家对.net core的接受程度并不高,这只是一个感觉,俗话说“没有调查就没有发言权”, 这两天通过微信小程 ...
- 向EXECL文件中导入数据的同时插入图片
因为项目需要在导出数据到EXECL文档的同时还需要导出图片进去,在处理是遇到的一些问题,在此记录一下. 首先代码写好之后放测试服务器上去执行的时候报错了,报检索 COM 类工厂中 CLSID 为 {0 ...
- JavaMail API
JavaMail API的核心类:会话.消息.地址.验证程序.传输,存储和文件夹.所有这些类都可以在JavaMail API即javax.mail的顶层包中找到,尽管你将频繁地发现你自己使用的子类是在 ...
- 关于Oracle、SqlServer 的sql递归查询
递归查询所有子节点 建人员表 hrmresource 主键 姓名 上级ID 层级关系:- 4 - 3 - 2 - 1 ...
- js变量提升和函数提升
变量,作为编程语言最基础的部分,每种语言的变量不尽相同,但又大径相庭.大部分编程语言的变量有块级作用域,如if.for.while... 但JavaScript不纯在块级作用域,而是函数作用域,并且有 ...
- response.getWriter().write()产生乱码
Struts1中通过action, return到页面的时候,如果代码中使用到response.getWriter().write(),那么有可能jsp页面中汉字会变成乱码.百度上有人说改为respo ...
- JS性能优化之怎么加载JS文件
IE8+等实行并行下载,各JS下载不受影响,但仍阻塞其他资源下载 如: 图片 所以首要规则就是:将JS放在body底部(推荐) 加载100kb的单个文件比4个25kb的文件快(减少外链文件数量)(脚本 ...
- octomap中3d-rrt路径规划
路径规划 碰撞冲突检测 在octomap中制定起止点,目标点,使用rrt规划一条路径出来,没有运动学,动力学的限制,只要能避开障碍物. 效果如下: #include "ros/ros.h&q ...
- 【知识整理】这可能是最好的RxJava 2.x 入门教程(三)
这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(一) 这可能是最好的RxJava 2.x 入门教程(二) GitHub 代码同步更新:ht ...
- css3自适应圆
.class{ width:auto; height:auto; border-radius:11px; min-width:14px; padding:0 4px; font-size:12px; ...