0

我正在尝试将选择列表动态添加到我的 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");
  });
});
4

2 回答 2

1

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

document.getElementById("dropDownList").addEventListener("click", function(ev) {
    if (ev.target.id === "scrapbookID") {
        console.log(" ...HElLoooooooosdvsdpovsdvni");
    }
}, false);
于 2013-04-28T17:51:18.670 回答
1

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

要监视DOM的变化，您可以使用突变事件（已弃用）或新的HTML5 MutationObserver

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

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

ul该脚本的作用是监视id为 的更改watch。当它看到更改时，它会使用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));

然后整个事情被包装在一个立即执行的匿名闭包中，我们将窗口对象传递到其中，然后我们将其作为名为的变量引用global。

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

您可以在以下位置找到更多示例；

html5rocks -使用 Mutation Observers 检测 DOM 更改
hacks.mozilla.org - DOM MutationObserver - 在不影响浏览器性能的情况下对 DOM 更改做出反应。

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

如果我不完全理解您的问题，那么至少我希望这会带来有趣的阅读。

于 2013-04-28T17:53:17.867 回答