如何在通过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 ...
随机推荐
- 利用Dockerfile构建mysql镜像并实现数据的初始化及权限设置
本文提要 本文目的不仅仅是创建一个MySQL的镜像,而是在其基础上再实现启动过程中自动导入数据及数据库用户的权限设置,并且在新创建出来的容器里自动启动MySQL服务接受外部连接,主要是通过Docker ...
- [转]tomcat部署(1)
阅读目录 1 目录结构 2 部署 3 发布 4 测试 本篇参考Tomcat官方文档:<First Webapp>翻译,并结合自己的开发经验介绍关于tomcat部署以及发布的相关内容. ...
- Bootstrap & 响应式
要了解一个东西 就是要知道 它是什么? 干什么 ? 怎么用 ? 1.Bootstrap 简介 Bootstrap 是由Twitter(著名的社交网站)推出的前端开源工具包,它基于Html.CSS. ...
- 玩转nodeJS系列:使用原生API实现简单灵活高效的路由功能(支持nodeJs单机集群),nodeJS本就应该这样轻快
前言: 使用nodeJS原生API实现快速灵活路由,方便与其他库/框架进行整合: 1.原生API,简洁高效的轻度封装,加速路由解析,nodeJS本就应该这样轻快 2.不包含任何第三方库/框架,可以灵活 ...
- JSP手动注入 全
检测可否注入 http://****.house.sina.com.cn/publics/detail.jsp?id=7674 and 1=1 (正常页面) http://****.house.sin ...
- sodu 命令场景分析
摘自:http://www.cnblogs.com/hazir/p/sudo_command.html sudo 命令情景分析 Linux 下使用 sudo 命令,可以让普通用户也能执行一些或者全 ...
- 使用 Python 进行并发编程 -- asyncio (未完)
参考地址 参考地址 参考地址 Python 2 时代, 高性能的网络编程主要是使用 Twisted, Tornado, Gevent 这三个库. 但是他们的异步代码相互之间不兼容越不能移植. asyn ...
- Java线程池入门必备
线程池 一. 线程池的简介 1.什么是线程池? 最早期的工作线程处理任务的模型.一个任务的到来,会伴随着线程的创建,当处理完任务后,线程会被销毁,资源回收.这种一个任务一个线程一系列创建销毁的模式 ...
- 基于TFS的.net技术路线的云平台DevOps实践
DevOps是近几年非常流行的系统研发管理模式,很多公司都或多或少在践行DevOps.那么,今天就说说特来电云平台在DevOps方面的实践吧. 说DevOps,不得不说DevOps的具体含义.那么,D ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...