Windows商店应用程序中Javascript的使用
提问于 2014-01-03 13:56:52
我在和地铁风格的应用程序做斗争。这是一个基本的场景:在按下主屏幕上的按钮后，您跳到另一个页面。然后动态创建部分html内容。例如：
<img id="bbb" src="/images/1.jpg">
<img id="ccc" src="/images/2.jpg">
<img id="ddd" src="/images/3.jpg">之后，我希望将JS函数附加到我添加的每个img标记的“单击”事件中。所以我做了这样的事情：
(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);
}
});})()；
当然，部分是：
element.querySelector("#bbb").onclick = this.button1Click("ff");在循环中。
但是在这种类型的附件函数之后，在加载后执行一次(即使没有单击)并消失。我在调试模式下检查了它，在加载之后，每个元素的onclick属性都有空值。使用这种方法：
element.querySelector("#bbb").addEventListener("click", this.button1Click("ff"), false);另一个组合，比如
document.getElementById("bbb").addEventListener("click", this.button1Click("ff"), false);等给出同样的结果。我很感谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-03 14:11:44
我认为您需要删除onClick函数的父函数，因为这将立即调用该函数(正如您所观察到的)。
由此：
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");
},对此：
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
<img id="bbb" src="/images/1.jpg" data-arg="ff">JS
function button1Click() {
// Get the clicked element
// JQuery solution
var arg = $(this).data('arg');
console.log(arg)
}此外，您还可以简化一些事情，为HTML使用类而不是ID，并为onClick处理程序分配一次。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20913405
复制
腾讯云开发者
