在特定div上的appendChild时，eventListener不起作用

Question

编辑：已回答问题。我的按钮是表单的一部分，并且具有submit作为默认type。将其更改为type="button"可解决此问题。

我正在使用button添加新的div（sectionHeader），其中包含使用button动态创建的createElement()，然后将其附加到已经存在的{{ 1}}（sectionBio）。

然后，我将div添加到eventListener之一。

当我使用button将sectionHeader添加到sectionBio时，单击我的appendChild()时，按钮和部分消失。在我的本地项目上，button上的eventListener（将'test'登录到控制台）甚至无法工作，尽管它在codepen上也可以。

当我通过button向身体添加sectionHeader时，一切都会按预期进行。

任何想法有什么问题吗？

document.body.appendChild()

let btnAjouterSection = document.querySelector('.btn-nouvelle-section');
let sectionBio = document.querySelector('.section-bio');

btnAjouterSection.addEventListener('click', () => {
  let sectionHeader = document.createElement('div');
  let headerTitle = document.createElement('h3');
  let btnSupprimer = document.createElement('button');
  let textArea = document.createElement('textarea');
  textArea.className = 'textarea-bio';
  textArea.readOnly = true;
  sectionHeader.className = 'section-header';
  btnSupprimer.className = 'btn btn-supprimer';
  headerTitle.className = 'titre';
  btnSupprimer.textContent = 'Supprimer';
  headerTitle.textContent = 'Nouvelle Section';
  sectionHeader.appendChild(headerTitle);
  sectionHeader.appendChild(btnSupprimer);
  //document.body.appendChild(sectionHeader);
  sectionBio.appendChild(sectionHeader);
  sectionBio.appendChild(textArea);
  btnSupprimer.addEventListener('click', () => {
    console.log('test');
  })
})

$color-blue-primary: #09f;
$color-blue-dark: #0075c3;
$color-dark-gray: #4f4f4f;
$color-light-gray: #eee;
$color-white: #fff;
.container {
  display: flex;
  flex-direction: column;
  width: 80%;
  .profil-header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 40px;
    position: relative;
    .img-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      .ajouter-photo-lien {
        text-decoration: none;
        color: $color-blue-dark;
      }
    }
    .bio-container {
      margin-left: 50px;
      .input {
        border: none;
        color: #3d3d3d;
        background: $color-light-gray;
        display: block;
        font-family: 'Source Sans Pro', sans-serif;
      }
      .input--active {
        border: 1px solid #333;
        background: #fff;
        padding: 0px 5px;
      }
      .nom {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .titre {
        margin-bottom: 15px;
        color: #3d3d3d;
        font-size: 1.4rem;
        font-weight: 700;
      }
      .formation {
        font-weight: 300;
        font-size: 1rem;
        color: #3d3d3d;
      }
      .medias-sociaux-container {
        margin-top: 10px;
        display: flex;
        align-items: center;
        .link {
          color: #3d3d3d;
          margin-right: 5px;
          font-size: 1.4rem;
          transition: all .2s;
          &--twitter:hover {
            color: #38A1F3;
          }
          &--linkedin:hover {
            color: #0077B5;
          }
          &--google {
            background: #3d3d3d;
            margin-top: -1px;
            border-radius: 3px;
            font-size: .8rem;
            padding: 3px 4px;
            color: $color-light-gray;
          }
          &--google:hover {
            background: #DB4437;
          }
          &--github:hover {
            color: #6cc644;
            ;
          }
          &--personal-page {
            background: #3d3d3d;
            margin-top: -1px;
            border-radius: 3px;
            font-size: .8rem;
            padding: 3px 3px;
            color: $color-light-gray;
          }
          &--personal-page:hover {
            background: $color-blue-primary;
          }
          &--email:hover {
            color: $color-blue-primary;
          }
        }
      }
    }
  }
  .section-bio {
    width: 90%;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px 30px 40px 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    .section-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      &--nouvelle-section {
        justify-content: flex-end;
      }
    }
    .ajout-ver-ang {
      margin-top: 20px;
      display: flex;
      width: 100%;
      justify-content: flex-start;
      align-items: center;
    }
    ul {
      margin-left: 30px;
    }
    h3 {
      margin-top: 50px;
      display: inline-block;
      clear: both;
    }
    .checkbox {
      margin-right: 10px;
    }
    .label {
      font-family: 'Source Sans Pro', sans-serif;
    }
  }
}

.btn {
  background: $color-blue-dark;
  color: #fff;
  border: none;
  padding: 5px 20px;
  border-radius: 5px;
  margin-left: 20px;
  margin-top: 1.5rem;
  font-weight: 300;
  font-size: 1rem;
  cursor: pointer;
  transition: all .2s;
  &-modifier {
    &--profil {
      position: absolute;
      right: 40px;
      top: 10px;
    }
  }
  &-supprimer {
    background: red;
  }
  &:hover {
    background: $color-blue-primary;
  }
}

.textarea-bio {
  border: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.7rem;
  width: 100%;
  height: auto;
  resize: none;
}

.textarea--active {
  border: 1px solid #333;
  padding: 10px;
  display: block;
  width: 100%;
  background: #fff;
  color: #000;
}