Question

如何将事件委托添加到动态创建的div中，以更改目标div的属性？我尝试了一些有关事件委派的建议，但是都没有用。我认为我犯了一些错误，但我不知道如何解决。

我正在尝试使用HTML和JavaScript开发文件缩略图列表界面。我做了一个从数组动态绘制缩略图的方法。现在，我想添加一些功能来操作缩略图，例如。单击项目时更改其边框颜色。

首先，我尝试使用循环方法将事件侦听器添加到div，但是效果不佳。现在，我了解到事件委托是将事件侦听器添加到动态创建的元素中的更好方法。但是问题是，尽管我尝试过代码，但根本没有用。

我认为我在犯一些错误或使用不当的方法，但我不知道出了什么问题。

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

如何将eventlistener添加到动态创建的div

0 个答案: