addEventListener програмно е нула

var button = document.createElement("button");
button.type = "button";

button.className = "button";
button.innerText = "OK";
button.addEventListener("click", function () {
    console.log("Hello!");
}, false);

Когато направя това, бутонът никога не получава този слушател на събития. Опитах attachEvent, button.onclick и изглежда нищо не работи. Бутонът се показва добре с класа и текста.

РЕДАКТИРАНЕ: Така че основно това, което се опитвам да направя, е програмно да покажа изскачащ масив от div.

Ето екранна снимка на това как изглежда: https://i.imgur.com/IqaOq.png и го настройвам така: var x = new JMTK.Custom.MessageDialog(), след това, за да добавя изскачащ прозорец, просто пиша x.addMessage({template: {type: JMTK.Custom.MessageDialog.templates.alert, title: "Alert title", message: "This is a message here", button1: {text: "Hello"}}})

Това е addMessage():

var content = document.createElement("div"); 
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML

който извиква тази функция:

alert: function (template, element) {
    //Array of functions
    var callbacks = MessageDialogClass.callbacks;

    var alert = document.createElement("div");
    var id = Date.now();
    alert.id = id;
                
    var header = document.createElement("h1");
    header.innerText = (template.title ? template.title : "ALERT");

    var paragraph = document.createElement("p");
    paragraph.innerText = (template.message ? template.message : "No message specified")

    var button = document.createElement("button");
    button.type = "button";

    button.className = "button";
    button.innerText = (template.button1.text ? template.button1.text : "OK");
    button.addEventListener("click", function () {
        if (template.button1.callback) {
            template.button1.callback();
        }

        //MessageDialogClass.popElement(id);
        //delete callbacks.id;
    }, false);

    alert.appendChild(header);
    alert.appendChild(paragraph);
    alert.appendChild(button);

    callbacks.id = alert;

    return alert;
},            

Но отново, когато щракна върху бутона, нищо не се случва и в DOM Explorer няма атрибут onclick.


person Jacob Morrison    schedule 28.12.2012    source източник
comment
Добавихте ли елемента към DOM? Какъв браузър (по-старите версии на IE не поддържат addEventListener)?   -  person jfriend00    schedule 28.12.2012
comment
Да, както казах, класът/текстът се показва alert.appendChild(button);, където предупреждението е моят външен div, никъде няма съобщения за грешка. В DOM Explorer във Visual Studio 2012 събитието onclick просто го няма.   -  person Jacob Morrison    schedule 28.12.2012
comment
Има нещо, което ни разкривате, защото общата концепция работи добре тук: jsfiddle.net/jfriend00/gdKKD   -  person jfriend00    schedule 28.12.2012
comment
Ще редактирам оригиналната си публикация с пълните подробности.   -  person Jacob Morrison    schedule 28.12.2012


Отговори (3)


Трудно е да се каже какво може да е вашето решение. Предоставихте добри подробности за това какво искате да направите с щракването върху бутона, но се страхувам, че има нещо друго в действие. Чудя се дали имате елемент пред бутона, който го предпазва от получаване на щракване с мишката. Виждам, че сте в проект на WinJS за Windows 8. Имате наистина добри инструменти за разработка във VS2012. Прекъснете веднага след като добавите бутона към вашия DOM и отидете в DOM Explorer и вижте дали ще намерите бутона. Отидете на конзолата на JavaScript и вижте дали имате достъп до бутона. Вижте дали можете да добавите слушател на събития ръчно там. Опитайте да добавите бутона ръчно във вашето маркиране и след това вижте дали добавянето на събитие работи. Надяваме се, че едно от тях ще ви отведе до решението. Късмет.

person Jeremy Foster    schedule 28.12.2012

Проблемът беше, че създавах div в моя шаблон за предупреждение и след това задавах innerHTML на друг div към този div. Така че нямаше да ми позволи да настроя слушателя на събития, защото не беше част от DOM.

Така че вместо да правите

var content = document.createElement("div"); 
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML

току що го направих

var content = document.createElement("div"); 
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML

защото alert вече връща div. Така че да, това беше свързано със задаване на innerHTML, а не просто със задаване на равен на DOM възела.

person Jacob Morrison    schedule 01.04.2013

Мисля, че трябва да добавите бутона си, преди да зададете слушателя на събития.

person HMarioD    schedule 28.12.2012
comment
Не, това не би причинило проблема. - person Elliot B.; 28.12.2012
comment
Не разбирам как браузърът може да конструира опашката за съобщения, ако обектът не е прикачен. - person HMarioD; 28.12.2012
comment
Можете да обвържете събития с елементи, преди елементът да бъде вмъкнат в DOM. Всъщност това е най-добрата практика. Ако можете да избегнете преминаването на DOM, докато обвързвате събития, тогава трябва да го направите - по-ефективно. - person Elliot B.; 28.12.2012
comment
Ново за мен, благодаря на @ElliotB. Между другото всъщност използвам element.onclick и винаги вярвам, че манипулаторът ще бъде прикачен в момента, в който елементът бъде приложен. - person HMarioD; 28.12.2012