0

html に選択リストを動的に追加しようとしています。ノードをdomに追加することで、これを成功させました。私の問題は、新しく作成された選択リストを認識するイベントリスナーを作成したい別のjavascriptファイルにあります。

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>

ジャバスクリプト

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));

次に、すべてがすぐに実行される無名クロージャーにラップされ、そこにwindow オブジェクトを渡します。このクロージャーは、変数 として参照されますglobal。

最後に、最初の 2 行はコメントですが、古いコメントではありません。これらはjslintで使用される命令です。JavaScript のソース コードが Douglas Crockford によって定められたコーディング規約に準拠しているかどうかをチェックするために JavaScript ソフトウェア開発で使用される静的コード分析ツール。

さらに例を見つけることができます。

html5rocks - Mutation Observers で DOM の変更を検出する
hacks.mozilla.org - DOM MutationObserver - ブラウザのパフォーマンスを損なうことなく DOM の変更に反応します。

AG* 検索により、より多くの結果が得られるはずです。

あなたの問題を正確に理解できなかったとしても、少なくともこれが興味深い読み物になることを願っています.

于 2013-04-28T17:53:17.867 に答える