How to add eventlistener to dynamically created divs

Question

How to add event delegation to dynamically created divs, to change property of the target div? I've tried several suggestions that I found for event delegation but none of them work. I think I'm making some mistakes but I don't know how to fix.

I am trying to develop a file thumbnail list interface with HTML and JavaScript. I made a method that draws thumbnails dynamically from an Array. And now I want to add some functions to manipulate the thumbnails, ex. changing border color of the item(div) when it is clicked.

First I tried loop-method to add event listeners to the divs, but it didn't work well. And now I learned that event delegation is better way to add event listeners to dynamically created elements. But the problem is that though I'v tried codes but they didn't work at all.

I think I am making some mistakes or mis-using methods but I don't know what is the problem.

JavaScript

function drawThumbnails(area, list){
    var j
    var createdList = []
    for (j=0; j<list.length; j++){
        var thmb = document.getElementById("fileThumb");
        var name = document.getElementById("itemName");
        var date = document.getElementById("itemDate");
        var thmbimg = document.getElementById("fileThumbImage");
        var thmbicon = document.getElementById("file_icon_thumb");
        name.innerHTML=list[j][0];
        date.innerHTML=list[j][1];
        if (list[j][2] == "folder"){
            thmbimg.src = "thmb_folder.png";
            thmbicon.style.display = "none";
        }
        else {
            if (list[j][2] == "img"){
                thmbimg.src=getthmbimgsample(); 
            }
            else{
                thmbimg.src = getThmbimg(list[j][2]);
            }
            thmbicon.style.display = "block";
            thmbicon.src = getThmbicon(list[j][2]);
        }
        var cln = thmb.cloneNode(true);
        cln.style.display = "block";
        document.getElementById(area).append(cln);
        createdList.push(cln);
    }
    thmbLists.push(createdList);
}

drawThumbnails("folderArea", folders);
drawThumbnails("fileArea", files);

 document.getElementById("folderArea").addEventListener('click',function(e){
    if(e.target && e.target.className == "fileThumb"){
        e.target.style.borderColor = "#408CFF";
     }
 });

HTML

<body>
    <div class = "contentArea" id="contentArea">
        <div class = "thumbArea" id="folderArea">
            <div class = "fileThumb" id="fileThumb">
                <img src="icon_thumb_folder.png" class="fileThumb_normal" id="fileThumbImage">
                <div class="fileName">
                    <img src="icon_thumb_file.png" style="width: 20px;" id="file_icon_thumb">
                    <div class="fileNameLine" id = "itemName">File/FolderName</div>
                    <div class="fileNameDate" id="itemDate">Date</div>
                </div>
            </div>
        </div>
        <div class = "contentAreaSectionHeader">
            <input type="checkbox" id="chTest2" name="chTest2">
            <label for="chTest2"><span>Files</span></label>
        </div>
        <div class = "thumbArea" id="fileArea">
        </div>
</body>

CSS

.fileThumb{
    width: 213px;
    height: 183px;
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: #EEEEEE;
    text-align: center;
    position: relative;
    float:left;
    margin: 18px;
    display: none;
    overflow: hidden;
}

IDs must be unique within an HTML document. But I don’t see you modifying any IDs on the element you are cloning and its descendants. — 04FS, Oct 25 '19 at 07:50
[This](https://jsfiddle.net/8gdex5af/1/) is my favorite. The element you're attaching the listener doesn't have to be `document`, it can be any common ancestor element of the elements you need to react to the delegated event. Notice, that delegating this way works only with bubbling events. — Teemu, Oct 25 '19 at 08:04

How to add eventlistener to dynamically created divs

0 Answers0