The checkbox bootstrap functionalities become ineffective when applied through jquery append

Question

The checkbox bootstrap functionalities become ineffective when applied through jquery append

I'm facing an issue with Bootstrap usage in the html section for checkboxes. It works fine there, but when I try to use it in the JavaScript section to append a tag, it doesn't seem to work.

Currently, I haven't been able to find a solution to this problem. What I want is for the functionality that works in the HTML section to also work the same way when added through JavaScript.

It seems like Bootstrap is not being utilized properly for the checkbox element.

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

javascript twitter-bootstrap dom bootstrap-4

Answer 1

Answer №1

Bootstrap styling is already in place at the time of HTML rendering and does not reapply itself after executing JavaScript to add a new section.

Answer 2

Bootstrap styling is already in place at the time of HTML rendering and does not reapply itself after executing JavaScript to add a new section.

Answer 3

Answer №2

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

Your code is utilizing an arrow function as the callback. Arrow functions do not bind the 'this' variable by default. To resolve this issue, consider using a regular function declaration for the callback instead. Here's an example:

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

If you prefer to continue using arrow functions for the callback, you can pass the event parameter explicitly like this:

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

In addition, since you are using Babel in npm run build, it will convert your ES6 code to ES5 implementation. This ensures compatibility with older browsers that may not support ES6 JavaScript features.

For more information on arrow functions and when to use them, you can refer to the following article:

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

Answer 4

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

Your code is utilizing an arrow function as the callback. Arrow functions do not bind the 'this' variable by default. To resolve this issue, consider using a regular function declaration for the callback instead. Here's an example:

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

If you prefer to continue using arrow functions for the callback, you can pass the event parameter explicitly like this:

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

In addition, since you are using Babel in npm run build, it will convert your ES6 code to ES5 implementation. This ensures compatibility with older browsers that may not support ES6 JavaScript features.

For more information on arrow functions and when to use them, you can refer to the following article:

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

The checkbox bootstrap functionalities become ineffective when applied through jquery append

Answer №1

Answer №2

Similar questions

choose a value from a dropdown menu to reset other dropdowns to their default values

Hold off on running addThis

Can markdown generated HTML be bound to an Angular 4 component?

Accessing the front camera on a laptop using mediaDevices.getUserMedia

Replacing strings with special characters appears to be malfunctioning

Is your iPhone struggling to display animation sprites correctly?

Connecting users from a mobile website to a particular item within the Amazon application

I can't seem to view the Request Payload of 10 million characters in the Chrome Network tab

Is it possible to utilize axios in Vue while utilizing CORS in the API?

Built-in validator in Bootstrap 4 - Error messageText

Achieve full implementation of ng-repeat within an angular directive

Modifying the default value setting in MUI Datepicker

Using the div tag to create a dropdown menu in an HTML document

Utilizing the float-left class in Bootstrap 4 on a div cancels out the link between <a><img></a> elements

A guide on updating and monitoring the boolean state of individual elements within an array

Using React to Calculate the Total Value of Child Components within the Parent Component

Clicking on the following link will initiate the process of submitting a form

Employ a directive within a different directive

What is the best way to open a new window, such as a music player, and integrate it into a Shopify environment

Unusual behavior of the splice function when applied to child nodes