списки событий на дочернем элементе нового сгенерированного элемента не работают

Question

У меня проблемы с моей страницей, у нее есть функция, которая создает новые элементы div (карты типа trello), и я могу перетащить их в рабочую область из поля «генератора». Эти карты имеют несколько кнопок с прикрепленными событиями щелчка. Код генератора правильно добавляет различные дочерние элементы карты, но проблема в том, что события щелчка не работают на сгенерированных картах, только если я уже вручную делаю это div в html. Я видел некоторые решения, но все они связаны с jQuery. Как мне назначить кликвенты по генерации, чтобы они работали?

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

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btns = document.getElementsByClassName("comment");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    modal.style.display = "block";
  }
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


//Generator code to make new cards

document.getElementById("newCombBtn").addEventListener("click", function() {

    var hex = document.createElement("div");
    hex.className = "hexagon";

    var like = document.createElement("button");
    like.innerHTML = "&#x2665";
    like.id = "likebtn";

    var del = document.createElement("button");
    del.innerHTML = "&#10799";
    del.id = "deletebtn";

    var inp = document.createElement("input");
    inp.className = "input";
    inp.placeholder = "Title";

    var com = document.createElement("button");
    com.innerHTML = "&#x2261";
    com.className = "comment";


    hex.appendChild(like);
    hex.appendChild(del);
    hex.appendChild(inp);
    hex.appendChild(com);
    document.getElementById("generatorField").appendChild(hex);

});

Итак, для подведения итогов мне нужно что-то добавить в событие нажатия, чтобы показать модальное время, когда я генерирую новые div, как указано выше.

Любая помощь будет отличной!

Answer 1

Если вы создаете новые элементы DOM после того, как регистрируете свои события, события только для старых элементов. Но вы можете зарегистрировать все события в функции и вызвать функцию после добавления новых элементов DOM.

https://jsfiddle.net/prg9bwu8/

Box 1 - это классический html. Box 2 создается с помощью JS.

function bindEvents() {
            document.getElementById("FirstBox").onclick = function () {
                alert("Box 1 function");
            }

            document.getElementById("SecondBox").onclick = function () {
                alert("Box 2 function");
            }
        }
        

        var newBox = document.createElement("div");
        newBox.className = "box";
        newBox.id = "SecondBox";
        document.getElementById("Test").appendChild(newBox);
        
        bindEvents();

.box{
            width: 200px;
            height:100px;
            border:1px solid;
            background:lightyellow;
        }

<div id="Test">
        <div id="FirstBox" class="box"></div>
    </div>

Answer 2

В то время, когда вы создали btns, model, span NodeList s, другие кнопки, которые вы генерировали впоследствии, еще не существовали, поэтому к ним не прикреплено EventListener.

Просто добавьте EventListener s после добавления нового элемента hex в DOM.

Например, после последней строки:

document.getElementById("generatorField").appendChild(hex)

добавьте еще одинEventListener как это:

hex.addEventListener('click', function(){
  //do what needs to be done when the new element is clicked
}