开发者社区> 木头先生> 正文

如何在通过knockout数据绑定的DOM元素上添加事件

简介: 通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才会出现。
+关注继续查看

 通过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();

 

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素
在本秘诀中,向jQuery函数传递原始HTML字符串,这一参数被方法用来在运行中创建DOM元素。 还可以简单地向jQuery函数传递一个由DOM方法createElement()创建的DOM对象:
1167 0
《jQuery Cookbook中文版》——1.13 克隆DOM元素
jQuery提供clone()方法复制DOM元素。它的用法很简单,只要用jQuery函数选择DOM元素,然后在选择的元素集上调用clone()方法就可以了。结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素。
999 0
如何判断一个元素在亿级数据中是否存在?(上)
一个面试题目: 现在有一个非常庞大的数据,假设全是 int 类型。现在我给你一个数,你需要告诉我它是否存在其中(尽量高效)。 需求其实很清晰,只是要判断一个数据是否存在即可。 但这里有一个比较重要的前提:非常庞大的数据。
11 0
【百度地图API】如何给自定义覆盖物添加事件
原文:【百度地图API】如何给自定义覆盖物添加事件 摘要:   给marker、lable、circle等Overlay添加事件很简单,直接addEventListener即可。那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ -----------------------------...
840 0
+关注
138
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载