为使用节点 appendChild 添加的列表创建一个 evenlistener答案

【问题标题】：creating an evenlistener for a list which was added using a node appendChild为使用节点 appendChild 添加的列表创建一个 evenlistener
【发布时间】：2013-04-22 08:40:08
【问题描述】：

我正在尝试将选择列表动态添加到我的 html 中。我通过向 dom 添加一个节点成功地做到了这一点。我的问题是在一个单独的 javascript 文件上，我想创建一个 eventlistner 来识别新创建的选择列表。

HTML 代码工作正常，但 javascript eventlistner 无法识别对列表所做的更改。

这是一个 chrome 扩展弹出屏幕

HTML

<!DOCTYPE html>
<HTML>
  <HEAD>
    <TITLE> Pop Up </TITLE>
    <script src="library.js"></script>
    <SCRIPT>
    function change(){
      var theDiv = document.getElementById("dropDownList");
      var select  = document.createElement('select');
      select.name = 'scrapbookID';
      select.id = 'scrapbookID';
      select.innerHTML = "<option value='15'>one</option>"+
                         "<option value='18'>two</option>"+
                         "<option value='20'>three</option>"+
                         "<option value='21'>four</option>";
      theDiv.appendChild(select);
    }
    </SCRIPT>
  </HEAD>
  <BODY>
    <DIV id="signout"> Your are Currently signed in.<BR>
      <A id="signOutPHP" href="file:///C:/Users/Kevin/AppData/Local/Temp/non19B.htm#">Sign Out</A>
        <DIV id="dropDownList">
          <BUTTON onclick="change()">Add List</BUTTON>
        </DIV>
    </DIV>
  </BODY>
</HTML>

JAVASCRIPT

document.addEventListener('DOMContentLoaded', function (){
  document.getElementById("scrapbookID").addEventListener('click', function(){
    console.log(" ...HElLoooooooosdvsdpovsdvni");
  });
});

【问题讨论】：

标签： javascript html ajax web-applications google-chrome-extension

【解决方案1】：

如果我正确理解您的问题，那么解决方案可能是；

要查看DOM 的更改，您可以使用mutation events（已弃用）或新的HTML5 MutationObserver

这是jsfiddle 上的一个示例，演示了如何使用它们。

这两种方法没有同时使用，脚本检查新方法 MutationObserver 是否受支持，然后使用它，否则它会退回到已弃用的突变事件。

此脚本的作用是监视 ID 为 watch 的 ul 的更改。当它看到更改时，它会使用 console.log 将信息记录到控制台

使用这些原则，您应该能够将它们应用于您的情况，并注意添加的元素并做出相应的反应。

HTML

<button id="button">Click me</button>
<ul id="watch"></span>

Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/* global global */

(function (global) {
    "use strict";

    if (typeof global.MutationObserver !== "function") {
        global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver;
    }

    var watch = document.getElementById("watch");

    function whenClicked() {
        var li = document.createElement("li");

        li.textContent = "List element";
        watch.appendChild(li);
    }

    document.getElementById("button").addEventListener("click", whenClicked, false);

    if (typeof global.MutationObserver !== "function") {
        watch.addEventListener("DOMNodeInserted", function (evt) {
            console.log("New element detected", evt.target);
        }, false);
    } else {
        var observer = new global.MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.type === 'childList') {
                    console.log("New element detected", mutation.addedNodes[0]);
                }
            });
        });

        observer.observe(watch, {
            childList: true,
            characterData: true,
            subtree: true
        });
    }
}(window));

然后整个事情被包装在一个匿名的closure 中，它会立即执行，我们将window object 传递到其中，然后我们将其作为名为@987654337@ 的变量引用。

最后，前两行是cmets，但不是任何旧的cmets，它们是jslint使用的指令；一种用于 JavaScript 软件开发的静态代码分析工具，用于检查 JavaScript 源代码是否符合 Douglas Crockford 提出的coding conventions。

G* 搜索应该会为您带来更多结果。

如果我没有完全理解你的问题，那么至少我希望这会是一个有趣的阅读。

【讨论】：

【解决方案2】：

将事件处理程序添加到父 <div /> 并检查 event.target 以获取添加的元素

document.getElementById("dropDownList").addEventListener("click", function(ev) {
    if (ev.target.id === "scrapbookID") {
        console.log(" ...HElLoooooooosdvsdpovsdvni");
    }
}, false);

【讨论】：