將事件附加到動態創建的元素

Question

我正在我的“待辦事項清單”中工作。 我的目標是在先前創建的 div 中創建一個“刪除”按鈕，其中包含用戶編寫的注釋。

問題是我不能使用 Jquery - click() 因為它不適用於動態創建的元素。

我嘗試使用 on()，但它會導致“刪除”按鈕出現在我所做的每個筆記中。

 var ammleng; var amount = []; function ammcheck() { if (amount.length == 0) { return amount.length; } else { return amount.length++; } } function Start() { var start = document.getElementsByClassName('start')[0]; start.style.display = 'none'; var textarea = document.getElementsByClassName('textarea')[0]; textarea.classList.remove('locked'); var btn = document.getElementsByClassName('btn__container')[0]; btn.classList.remove('locked'); var text = document.getElementsByClassName('text')[0]; text.classList.add('after'); $('.notes').slideDown(2000); } function add() { var txtarea = document.getElementsByClassName('textarea')[0]; ammleng = amount.length; if (ammleng >= 13) { alert('Za dużo notatek!') } else if (txtarea.innerText.length < 1) { alert('Nic nie napisałeś :('); } else { amount[ammcheck()] = document.getElementsByClassName('note'); var text = $('.textarea').html(); var cont = document.getElementsByClassName('notes')[0]; var ad = document.createElement('div'); var adding = cont.appendChild(ad); adding.classList.add('note'); adding.innerText = text; txtarea.innerText = ''; } } function reset() { var els = document.getElementsByClassName('notes')[0]; els.innerHTML = ''; amount = []; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='content'> <div class='logo'> To Do List </div> <div class='text'> <button class='start' onclick='Start()'>Zaczynajmy</button> <div class='textarea locked' contenteditable='true' data-text='Wpisz notkę...'></div> <div class='btn__container locked'> <button class='dodaj' onclick='add()'>Dodaj</button> <button class='resetuj' onclick='reset()'>resetuj</button> </div> </div> <div class='notes'></div> </div>

我試圖這樣做，但它返回一個錯誤（......'appendChild（）不是一個函數......'）

var del = document.createElement('div');
        del.classList.add('del');

        $('.notes').on('click', '.note', function(){
            $(this).appendChild(del);
            })

Answer 1

使用已經存在的document綁定點擊

        $(document).on('click', '.note', function(){
            $(this).appendChild(del);
        })