Добавить прослушиватель событий к динамически созданной кнопке

Я просмотрел другие ответы, но не смог найти решение этой проблемы.Добавить прослушиватель событий к динамически созданной кнопке

У меня есть этот HTML:

<body> 
    <h1>Javascript in the Browser</h1> 
    <div id="removeReference"> 
    </div> 
    <div> 
    <p>This page looks a little sad without any style...</p> 
    <button id="styleButton">Apply some style!</button> 
    </div> 
    <div id="imagePlaceholder"> 
    </div> 
<script src="script.js"></script> 
</body>

В файле JavaScript, у меня есть функция stylePage, которая вызывается при нажатии на кнопку, и это добавляет некоторый стиль, удаляет саму кнопку, и создает новую кнопку. На этом этапе я хотел бы добавить событие к этой динамически созданной новой кнопке, чтобы при нажатии на нее запускалась функция createImage.

Я знаю, что лучше использовать библиотеки, но это попытка самообучения JavaScript. Я думал, что, возможно, было возможно вернуть кнопку от stylePage и добавить прослушиватель событий к возвращаемому значению, но это не сработало. Любое предложение очень ценится, спасибо!

function stylePage(){ 
    var body = document.getElementsByTagName("body"); 
    body[0].style.backgroundColor = "rgb(214, 214, 214)"; 
    body[0].style.color = "#778899"; 
    body[0].style.fontFamily = "Courier"; 
    body[0].style.textAlign = "center"; 
    var remove = document.getElementById("removeReference"); 
    remove.nextElementSibling.remove(); 
    var newButton = document.createElement("button"); 
    var newContent = document.createTextNode("Not enough?"); 
    newButton.appendChild(newContent); 
    document.body.insertBefore(newButton, remove); 
}; 

function createImage(){ 
    var img = document.createElement("img"); 
    img.src = "pepsi_dog_by_werelyokoman.jpg"; 
    document.getElementById("imagePlaceholder").appendChild(img); 
} 

var button = document.getElementsByTagName("button"); 
button[0].addEventListener("click", stylePage); 
//??? reference to newButton ??? .addEventListener("click", createImage);

источник

2016-08-20 HiFi

Вы можете найти эту статью полезной: https://davidwalsh.name/event-delegate – SimianAngel

HTTP: // StackOverflow .com/вопросы/1687296/what-is-dom-event-delegation –

Спасибо за информацию о делегировании событий! – HiFi

-1

Самый простой способ сделать это было бы добавить .addEventListener до конца вашей stylePage функции:

var newContent = document.createTextNode("Not enough?"); 
    newButton.appendChild(newContent); 
    document.body.insertBefore(newButton, remove); 
    newButton.addEventListener("click", createImage);  
};

JSFiddle demonstrating this.

Но скажите, что вы не хотели этого делать по какой-либо причине - возможно, у вас нет контроля над функцией, которая динамически создает вашу кнопку. В этом случае вы можете использовать MutationObserver для просмотра изменений в DOM.

Вы бы это сделать так:

var target = document.getElementsByTagName('body')[0]; 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    if(mutation.addedNodes.length > 0 && mutation.addedNodes[0].firstChild.nodeValue == "Not enough?") { 
     mutation.addedNodes[0].addEventListener("click", createImage); 
    } 
    });  
}); 

var config = { attributes: true, childList: true, characterData: true }; 
observer.observe(target, config);

См this JSFiddle.

источник

2016-08-20 02:03:07

Спасибо, это сработало! И я узнал что-то новое! :) – HiFi

-1

Вы можете использовать делегирование событий:

document.querySelector('body').on('click', function() { 
    //You need to identify the new elements here...... 
});

Я создал jsfiddle: jsfiddle

источник

2016-08-20 02:31:49 Zich

Это совсем не то, о чем попросил ОП - вся суть вопроса заключается в идентификации новых элементов. –

Кроме того, действительно глупо использовать 'document.querySelector ('body')', когда 'document.body' также получает элемент body. Но это даже не решает проблему. – jfriend00

Вся суть вопроса заключалась в том, чтобы привязать обработчик кликов к динамически созданным элементам. Это именно то, что предназначено для делегирования. –

Добавить прослушиватель событий к динамически созданной кнопке

ответ

Смежные вопросы