Использование Javascript в приложении Магазина Windows

Question

Использование Javascript в приложении Магазина Windows

0

Я боюсь приложения 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 каждого элемента имели нулевое значение. Используя этот метод:

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

и другие комбинации

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

и т.д. дает тот же результат. Я ценю любую помощь.

Piotr Rachwał 03 янв. 2014, в 23:01

Источник

Теги:

javascript

html

windows-store-apps

windows-8.1

1 ответ

Ещё вопросы

Bavell · Accepted Answer · 2014-01-03T20-30-00.000Z

Я считаю, что вам нужно удалить parens для ваших функций 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;
},

Затем вам нужно будет получить аргументы в вашей функции щелчка, возможно, привязывая ее к самому 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 один раз.