Question

我正在努力使用Metro风格的应用程序。这是基本方案：在主屏幕上按下按钮后，您将跳转到另一页。然后我动态创建部分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属性后立即具有null值。使用此方法：

element.querySelector("#bbb").addEventListener("click", this.button1Click("ff"), false);

和其他组合如

document.getElementById("bbb").addEventListener("click", this.button1Click("ff"), false);

等。给出相同的结果。我感谢任何帮助。

Answer 1

我相信您需要删除onClick函数的parens，因为这会立即调用该函数（如您所见）

从此：

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)
}

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

Windows Store App中的Javascript用法

1 个答案:

从此：

对此：

HTML

JS