如何在通过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 ...
随机推荐
- 【web前端开发】浏览器兼容性处理
1.居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的 ...
- 关于 IDEA 自动识别问题,jsp页面Controller路径自动识别的问题
idea之所以强大,就是强大的代码提示和联想功能,写起代码来简直不要太爽.但是这几天我发现在我的jsp页面中访问controller路径的时候不会自动提示了,对于这么严谨的我肯定要找出原因啊,哈哈. ...
- (原创) Maven查看JAR包的依赖关系
如果是用命令行,可进入项目所在目录,然后输入: mvn dependency:tree ,来查看jar包依赖关系. 另外还可以在eclipse操作,如下图所示: 点击run后,开始输出JAR包依赖树. ...
- apache和nginx支持SSI配置
今天发现了一种新的语言格式:.shtml 一. 前言 SSI是一种类似于ASP的基于服务器的网页制作技术.将内容发送到浏览器之前,可以使用"服务器端包含 (SSI)"指令将文本.图 ...
- WireShark网络分析就这么简单 读后感
京东618活动,满200减100,果断入手了这本经典的 WireShark教程
- 一般处理程序+htm C#l简单的增删查改
首先引用两个文件一个dll: 数据库表已创建 首先编写数据读取部分 /// <summary> /// 查询 /// </summary> /// <param name ...
- python基础操作
1.打印操作 print('2222') 2.接收用户输入 name=input('name') 3.if else判断 name='qiao'name2='师弟'username=input('输入 ...
- Linux 多个JDK的版本 脚本切换
这里是在CentOS 系统下配置多个版本之间的切换 1.到官网下载jdk7和jdk8 地址:http://www.oracle.com/technetwork/cn/java/javase/downl ...
- ActiveMQ 和消息简介
Apache ActiveMQ 是远程系统间进行通信的消息代理,实现了 JMS(Java Message Service,Java 消息服务).尽管 ActiveMQ 是使用 Java 写的,但是其提 ...
- JavaScript数组知识点
强类型语言数组特点:连续的,指定好长度, 还要规定好数据类型弱类型语言数组特点:不一定是连续的 可以不用指定长度 不限定数据类型(可以存储任意类型的数据)数组定义方式:1.var arr=new Ar ...