通过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元素上添加事件的更多相关文章

  1. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  2. dom元素上添加断点(使用dom breakpoint找到修改属性的javascript代码)

    使用dom breakpoint能快速找到修改了某一个dom element的JavaScript code位于何处.在Chrome development tool里,选中想要inspect的dom ...

  3. JS闭包机制实现为DOM元素循环添加事件

    HTML代码: <button type='button' class='btn' id='1'>按钮1</button> <button type='button' c ...

  4. 【jquery】 在异步加载的元素上绑定事件

    最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...

  5. event.target 属性返回哪个 DOM 元素触发了事件。

    <ul> <li>list <strong>item 1</strong></li> <li><span>list ...

  6. 在元素上写事件和addEventListent()的区别

    在元素上写事件和addEventListent()的区别1. onclick添加事件不能绑定多个事件,后面绑定的会覆盖前面的.而addEventListener能添加多个事件绑定,按顺序执行.2. a ...

  7. Jquery 在动态元素上绑定事件

    弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" valu ...

  8. jQuery查看dom元素上绑定的事件列表

        jQuery API提供了一种能够查看元素已绑定事件的列表,这个功能在进行功能调试的时候特别有用,尤其确定在代码执行过程中元素绑定的事件是否被更改. 1: jQuery( elem ).dat ...

  9. ajax获取的数据如何渲染到dom元素上

    1.常见的字符串拼接 (对于动态创建的元素添加js时,使用事件委托,利用事件冒泡的原理,把事件添加到父级元素上,触发执行效果) $("ul").on('click','li',fu ...

随机推荐

  1. CSS小技巧-煎蛋的画法~

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 06.04 html

    域名跟ip地址是绑定的看某个网站的ip地址 可以ping网址知道ip地址   最终访问的都是ip地址  每个ip地址都对应了一个空间(一块区域 要用来存储内容)网页访问的原理: 客户端电脑发动请求到服 ...

  3. Python3网络爬虫

    # 最近在实验楼学习了爬取妹子图,发现在运行的时候不是很流畅,有些图片下 1 # coding: utf-8 # coding: utf-8 import re import threading fr ...

  4. iOS地理围栏技术的应用

    遇到一个需求,要求监测若干区域,设备进入这些区域则要上传数据,且可以后台监测,甚至app被杀死也要监测.发现oc的地理围栏技术完美匹配这个需求,任务做完了,把遇到的坑记录下来,也许能帮到你呢. 要做这 ...

  5. STL语法——映射:map 反片语(Ananagrams,UVa 156)

    Description Most crossword puzzle fans are used to anagrams--groups of words with the same letters i ...

  6. JavaScript设计模式_01_单例模式

    最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言.也看过很多高级教程,觉得自己还是比较热衷于js的设计模式.这一次重温一下<JavaScript设计模式与开发实践>,开篇为单例模式 ...

  7. POI使用:用poi接口不区分xls/xlsx格式解析Excel文档(41种日期格式解析方法,5种公式结果类型解析方法,3种常用数值类型精度控制办法)

    一.使用poi解析excel文档 注:全部采用poi接口进行解析,不需要区分xls.xlsx格式,不需要判断文档类型. poi中的日期格式判断仅支持欧美日期习惯,对国内的日期格式并不支持判断,怎么办? ...

  8. C#从基于FTPS的FTP server下载数据 (FtpWebRequest 的使用)SSL 加密

    FTPS,亦或是FTPES, 是FTP协议的一种扩展,用于对TLS和SSL协议的支持. 本文讲述了如何从一个基于FTPS的Server中下载数据的实例.   任何地方,如有纰漏,欢迎诸位道友指教.   ...

  9. react-native学习(RN)--之Window环境下搭建环境配置

    react-native以后会更火的,自从2015年facebook开源了Android 一.安装java 二.安装Android Studio 三.安装react-native需要的Android ...

  10. 提高java编程质量 - (一)易变业务使用脚本语言编写

    脚本语言的3大特征: 1.灵活:脚本语言一般是动态类型,可以不声明变量类型直接使用,也可以在运行期改变类型:2.便捷:脚本语言是解释性语言,在运行期变更非常方便,而不用重启服务3.简单:脚本语言语法比 ...