Attaching Event to dynamically created element

Question

I am working at my 'To Do List'. My goal is to create an 'delete' button inside previously created div, which contains note written by user.

The problem is that I can't use Jquery - click() because it doesn't work with dynamically created elements.

I tried to use on(), but it causes that 'delete' button appears in every note I made.

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>

I tried to make it this way, but it return an error (...'appendChild() is not a function...')

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

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

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Devsi Odedra, Dec 12 '19 at 13:03
`on()` is what you need to use. Your description of why it doesn't work makes very little sense. We need to see your code to help you debug it — Rory McCrossan, Dec 12 '19 at 13:03

score 2 · Accepted Answer · answered Dec 12 '19 at 13:17

2

use already existing document to bind click on

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

answered Dec 12 '19 at 13:17

john Smith

17,409
11
76
117

Attaching Event to dynamically created element

1 Answers1