將事件偵聽器添加到動態創建的按鈕

Question

我瀏覽了其他答案，但找不到該問題的解決方案。

我有這個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返回按鈕並將事件偵聽器添加到返回值，但這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);

Answer 1

要做到這一點，最簡單的方法是增加.addEventListener到你結束stylePage功能：

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

JSFiddle對此進行了演示。

但是請說由於某些原因您不想這樣做-也許您無法控制動態創建按鈕的功能。 在這種情況下，您可以使用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);

看到這個JSFiddle 。

Answer 2

您可以使用事件委托：

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

我創建了一個jsfiddle： jsfiddle

將事件偵聽器添加到動態創建的按鈕

問題描述

2 個解決方案

解決方案1
0 已采納 2016-08-20 02:03:07

解決方案2
-1 2016-08-20 02:31:49

將事件偵聽器添加到動態創建的按鈕

問題描述

2 個解決方案

解決方案1 0 已采納 2016-08-20 02:03:07

解決方案2 -1 2016-08-20 02:31:49

解決方案1
0 已采納 2016-08-20 02:03:07

解決方案2
-1 2016-08-20 02:31:49