Функции загрузки флажка не работают, когда сделано с помощью jquery append

Question

Bootstrap отлично работает в разделе html для флажка, но когда я использую его в разделе JavaScript для добавления тега, он не работает.

Я не могу найти решение. Я хочу, чтобы он работал в HTML, он будет работать так же, как при добавлении с помощью сценария Java.

Начальная загрузка не используется для флажка

let addItem = (value) => {
  $("#todo").append(`<li>
  <div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
  <label class="custom-control-label" for="customCheck">${value}</label> 
  <button type="button" class="btn btn-danger" id="delete"><i class="fas fa-trash"></i></button>
  </div>
  </li>`);
}

Answer 1

Причина в том, что bootstrap уже был применен при рендеринге html и не применяется повторно после выполнения вашего javasript (добавление раздела)

Answer 2

$('#todo').on('click', '.delete', () => { $(this).parent().remove();});

Вы используете функцию стрелки в качестве обратного вызова. Функции по умолчанию не связывают переменную 'this' по умолчанию. Вам нужно использовать объявление функции для обратного вызова. Следующее будет работать

$("#todo").on("click", ".delete", function() {
  console.log("this", this);
  $(this)
    .parent()
    .remove();
});

При этом, если вы все еще хотите использовать функции стрелок для обратного вызова, вы можете указать обратный вызов с параметром события следующим образом, который также будет работать

$("#todo").on("click", ".delete", event => {
  console.log("this", event);
  $(event.currentTarget)
    .parent()
    .remove();
});

Кроме того, так каквы используете Babel в npm run build, он преобразует код ES6 в реализацию ES5, чтобы все браузеры, которые могут не поддерживать ES6 javascript, и до сих пор могли запускать ваш код без ошибок.

Для дальнейшего использованиячитая об использовании функций стрелок, обратитесь к следующей статье.

https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/