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

原因是在渲染html时已经应用了引导程序，并且在执行javasript（添加该部分）后不会重新应用

Answer 2

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

您使用的是箭头函数作为回调函数。箭头函数默认情况下不绑定'this'变量。您需要做的是对回调函数使用函数声明。下面的方法会起作用

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

话虽如此，如果您仍然想使用箭头函数进行回调，则可以按如下所示使用event参数指定回调，

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

此外，由于您在npm run build中使用Babel，它将把ES6代码转换为ES5实现，以便所有可能不支持ES6 JavaScript的浏览器都可以正常运行代码。

要进一步了解箭头功能的用法，请参阅以下文章。

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

使用jquery附加完成后，复选框的引导功能不起作用

2 个答案: