Question

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

Answer 1

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

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

Answer 2

如果我理解你的问题，那么解决方案可能是;

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

以下是jsfiddle上的示例，演示了如何使用这些内容。

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

此脚本执行的操作是监视ID为ul的{{1}}的更改。当它看到更改时，它会使用console.log

将信息记录到控制台

使用这些原则，您应该能够将它们应用到您的情况中，并观察添加的元素并相应地对它们做出反应。

HTML

watch

的Javascript

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

然后将整个事件包装在一个匿名的closure中，该匿名window object会立即执行，然后我们将jslint传递给我们，然后我们将其引用为名为/*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));的变量。

最后，前两行是评论，但不是任何旧评论，它们是coding conventions使用的说明;用于javascript软件开发的静态代码分析工具，用于检查JavaScript源代码是否符合道格拉斯·克罗克福德提出的Detect DOM changes with Mutation Observers。

您可以在

找到更多示例

html5rocks - DOM MutationObserver – reacting to DOM changes without killing browser performance.
hacks.mozilla.org - {{3}}

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

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

为使用节点appendChild添加的列表创建事件侦听器

2 个答案: