Как добавить eventlistener в динамически создаваемые div - PullRequest
Новая
       39

Как добавить eventlistener в динамически создаваемые div

0 голосов
/ 25 октября 2019

Как добавить делегирование событий в динамически создаваемые div, чтобы изменить свойство целевого div? Я попробовал несколько предложений, которые я нашел для делегирования события, но ни одно из них не работает. Я думаю, что делаю некоторые ошибки, но я не знаю, как исправить.

Я пытаюсь разработать интерфейс списка миниатюр файлов с HTML и JavaScript. Я сделал метод, который рисует миниатюры динамически из массива. А теперь я хочу добавить некоторые функции для управления миниатюрами, напр. изменение цвета границы элемента (div) при его щелчке.

Сначала я попробовал loop-метод для добавления прослушивателей событий в 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;
}
...