无法点击动态创建的按钮？

Question

我具有以下功能：

  $('.list-group .list-group-item.list-group-item-action').click(function(e) {
    $('.list-group .list-group-item.list-group-item-action.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
  });

  document.querySelectorAll('.list-group-item').forEach(function(channel){
    channel.onclick = () =>{
      load_channel(channel);
      return false;
    }
  });

   socket.on('create channel', data =>{
    const button = document.createElement('button');
    button.className = "list-group-item list-group-item-action";
    button.innerHTML = `${data.channel}`;
    document.querySelector('.list-group').append(button);

  });

最后一个函数在此列表中动态创建一个按钮（忽略jinja）：

  <div class="list-group">

        <button class="list-group-item list-group-item-action active">General</button>
        {% for channel in channels %}
        <button class="list-group-item list-group-item-action">{{ channel }}</button>
        {% endfor %}
      </div>

但是创建后，前两个功能不起作用。

解决方案是什么？