Creating An Evenlistener For A List Which Was Added Using A Node Appendchild

I'm trying to add a select list dynamically to my html. I've done this successfully by adding a node to the dom. My problem is on a separate javascript file I want to create an eve

Solution 1:

Add the event handler to the parent <div /> and check event.target for the added element

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

Solution 2:

If I understand your problem correctly, then a solution could be;

To watch for changes to the DOM you can use mutation events (deprecated) or the new HTML5MutationObserver

Here is an example on jsfiddle that demonstrates how these are used.

Both methods are not being used at the same time, the script checks to see if the new method, MutationObserver, is supported and then uses that, else it falls back to the deprecated mutation event.

What this script does is watches for changes to the ul with the id of watch. When it sees a change then it logs the information to the console using console.log

Using these priciples, you should be able to apply them to your situation, and watch for added elements and react to them accordingly.

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 (typeofglobal.MutationObserver !== "function") {
        global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver;
    }

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

    functionwhenClicked() {
        var li = document.createElement("li");

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

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

    if (typeofglobal.MutationObserver !== "function") {
        watch.addEventListener("DOMNodeInserted", function (evt) {
            console.log("New element detected", evt.target);
        }, false);
    } else {
        var observer = newglobal.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));

The whole thing is then wrapped in an anonymous closure which is executed immediately, and into which we pass the window object which we then reference as the variable named global.

Finally, the first two lines are comments, but not any old comments, they are instructions that are used by jslint; a static code analysis tool used in javascript software development for checking if JavaScript source code complies with coding conventions set out by Douglas Crockford.

You can find further examples at;

html5rocks - Detect DOM changes with Mutation Observers hacks.mozilla.org - DOM MutationObserver – reacting to DOM changes without killing browser performance.

A G* search should bring you more results.

If I didn't understand your problem exactly, then at least I hope that this made for an interesting read.