首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Windows商店应用程序中Javascript的使用

Windows商店应用程序中Javascript的使用
EN

Stack Overflow用户
提问于 2014-01-03 21:56:52
回答 1查看 84关注 0票数 0

我在和地铁风格的应用程序做斗争。这是一个基本的场景:在按下主屏幕上的按钮后,您跳到另一个页面。然后动态创建部分html内容。例如:

代码语言:javascript
代码运行次数:0
运行
复制
<img id="bbb" src="/images/1.jpg">
<img id="ccc" src="/images/2.jpg">
<img id="ddd" src="/images/3.jpg">

之后,我希望将JS函数附加到我添加的每个img标记的“单击”事件中。所以我做了这样的事情:

代码语言:javascript
代码运行次数:0
运行
复制
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/myPage/myPage.html", {
    ready: function (element, options) {
        element.querySelector("#bbb").onclick = this.button1Click("ff");
        element.querySelector("#ccc").onclick = this.button1Click("ee");
        element.querySelector("#ddd").onclick = this.button1Click("dd");
    },
    button1Click : function (arg)
    {
        console.log(arg);
    }
});

})();

当然,部分是:

代码语言:javascript
代码运行次数:0
运行
复制
element.querySelector("#bbb").onclick = this.button1Click("ff");

在循环中。

但是在这种类型的附件函数之后,在加载后执行一次(即使没有单击)并消失。我在调试模式下检查了它,在加载之后,每个元素的onclick属性都有空值。使用这种方法:

代码语言:javascript
代码运行次数:0
运行
复制
element.querySelector("#bbb").addEventListener("click", this.button1Click("ff"), false);

另一个组合,比如

代码语言:javascript
代码运行次数:0
运行
复制
document.getElementById("bbb").addEventListener("click", this.button1Click("ff"), false);

等给出同样的结果。我很感谢你的帮助。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-01-03 22:11:44

我认为您需要删除onClick函数的父函数,因为这将立即调用该函数(正如您所观察到的)。

由此:

代码语言:javascript
代码运行次数:0
运行
复制
ready: function (element, options) {
    element.querySelector("#bbb").onclick = this.button1Click("ff");
    element.querySelector("#ccc").onclick = this.button1Click("ee");
    element.querySelector("#ddd").onclick = this.button1Click("dd");
},

对此:

代码语言:javascript
代码运行次数:0
运行
复制
ready: function (element, options) {
    element.querySelector("#bbb").onclick = this.button1Click;
    element.querySelector("#ccc").onclick = this.button1Click;
    element.querySelector("#ddd").onclick = this.button1Click;
},

然后,您需要将args放到click函数中,也许可以将其绑定到html本身。可能有一种同时绑定函数args的方法,但我对WinJS不太熟悉。

HTML

代码语言:javascript
代码运行次数:0
运行
复制
<img id="bbb" src="/images/1.jpg" data-arg="ff">

JS

代码语言:javascript
代码运行次数:0
运行
复制
function button1Click() {
    // Get the clicked element
    // JQuery solution
    var arg = $(this).data('arg');
    console.log(arg)
}

此外,您还可以简化一些事情,为HTML使用类而不是ID,并为onClick处理程序分配一次。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20913405

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档