Wstawianie diva, problem z działaniem funkcji

Witam! Mam problem, wstawiam diva za pomocą innerHTML'a po evencie drop. Div jest taki sam jak ten którym dokonuje drag and dropa, lecz po pojawieniu się nowego, z tym nowym nie mogę nic zrobić, tj. nie działa funkcja usuwania go, nie działa drag and drop. Poniżej kod....

<div class="stickynotefield cyan lighten-5" id="demo">
			
<div class="card p-2 cyan lighten-4 darken-1 mx-2 list-item stickynote" draggable="true" ondrop="drop()">
<div class="delnote"></div>
<h5 class="card-title">Tytuł</h5>
<textarea class="cyan lighten-4 form-control xd" onkeydown="textAreaAdjust(this)"></textarea>
</div>
			
</div>

I skrypt

function makenote()
{
document.getElementById("demo").innerHTML = '<div class="card p-2 cyan lighten-4 darken-1 mx-2 list-item stickynote" draggable="true" ondrop="drop()"><div class="delnote"></div><h5 class="card-title">Tytuł</h5><textarea class="cyan lighten-4 form-control xd" onkeydown="textAreaAdjust(this)"></textarea></div>';
}

Np ta funkcja działa na pierwotnym divie ale na tym wstawionym przez skrypt juz nie

$('.delnote').click(function(){
    $(this).parent().remove();
    return;
});

LukeJL napisał(a):

Domyślam się, że korzystasz z jQuery? To spróbuj on zamiast click https://api.jquery.com/on/

No nie bardzo to działa. Nie o to chodzi. Raczej chodzi o to, że ten nowy div jest jakby niefunkcyjny. Żadna funkcja na niego nie działa.

Problem polega zapewne na tym, że dodajesz zdarzenie tylko w momencie ładowania strony, przez np: $( document ).ready(function() {...});. W takim przypadku tylko do istniejących elementów zostanie dodane to zdarzenie. Dodając nowe elementy należałoby odpalić to dodawanie jeszcze raz, ale w tedy do poprzednich elementów zdarzenie zostanie dodane ponownie i będzie wykonywane kilkukrotnie. Można to rozwiązać dodając wydarzenie do całego dokumentu i delegując je jedynie do elementów o danej klasie. W tedy nawet dynamicznie dodawane elementy będą miały przypisane zdarzenie. Wygląda to tak:
$(document).on('click', 'selector', function(){})