Question

我正在“待办事项清单”上工作。我的目标是在先前创建的div中创建一个“删除”按钮，其中包含用户编写的注释。

问题是我不能使用Jquery-click（），因为它不适用于动态创建的元素。

我尝试使用on（），但这导致在我做的每张笔记中出现“删除”按钮。

var ammleng;
var ammount = [];

function ammcheck() {
  if (ammount.length == 0) {
    return ammount.length;
  } else {
    return ammount.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 = ammount.length;
  if (ammleng >= 13) {
    alert('Za dużo notatek!')
  } else if (txtarea.innerText.length < 1) {
    alert('Nic nie napisałeś :(');
  } else {
    ammount[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 = '';
  ammount = [];
}

<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);
        })

将事件附加到动态创建的元素

1 个答案: