通过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. 16.3Sum Closet

    思路: 暴力,复杂度为 \(O(n^3)\),超时 class Solution { public: int threeSumClosest(vector<int>& nums, ...

  2. Perl正则表达式例子

    Perl正则表达式 一.介绍 正则表达式各语言都有自己的规范,但是基本都差不多,都是由元字符的组合来进行匹配:由于Nmap内嵌的服务与版本探测是使用的Perl正则规范,因此此篇博客记录一下Perl正则 ...

  3. 不再迷惑,无值和NULL值的转换

    在关系型数据库的世界中,无值和NULL值的区别是什么?一直被这个问题困扰着,甚至在写TSQL脚本时,心有戚戚焉,害怕因为自己的一知半解,挖了坑,贻害后来人,于是,本着上下求索,不达通幽不罢休的决心(开 ...

  4. ecshop商品页增加编辑器fckeditor

    最近在做ecshop的项目,需要在商品单页中增加一项FCKEditor的文本编辑器,但在ecshop的论坛和百度里搜出的方法,试了好几个都没有用,终于找到一个可以正确使用的,和大家分享. ecshop ...

  5. js函数中的BOM和DOM

    BOM 浏览器对象模型  screen对象 console.log(screen.width);// 屏幕宽度 console.log(screen.height);// 屏幕高度 console.l ...

  6. 《HelloGitHub》第 15 期

    公告 这段时间没怎么写文章,跑去写 https://hellogithub.com 这个网站了,现在已经顺利上线,功能后面会持续迭代. 最后,这个 https://hellogithub.com 网站 ...

  7. 查看java线程cpu占用情况的脚本

    #!/bin/bash [ $# -ne ] && exit jstack $ >/tmp/jstack.log -o THREAD,tid,time|sort -k2nr| s ...

  8. 【LeetCode】225. Implement Stack using Queues

    题目: Implement the following operations of a stack using queues. push(x) -- Push element x onto stack ...

  9. 【Android Developers Training】 101. 显示快速联系人挂件(Quick Contact Badge)

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  10. 一篇文章学懂Shell脚本

    Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合.Shell可以直接使用在win/Unix/Linux上面, ...