Inserting HTML with JQuery, but JQuery and CSS styles are not being applied to new HTML

Question

I created a simple To Do List program. I created an event to delete a task from the list. And I made an event to change the style of a task that is marked as completed. Both of these events work on tasks that are in the original HTML. The problem is when I insert a task via the user input using jquery. The events to delete/mark as complete do not work on new Task items that are added to the list.

 // Adds task to list when button is clicked
 $("#taskButton").click(function() {

  var taskHTML = '<div class="form-check d-flex w-100 justify-content-between p-1 m-0 border border-info">'; 
  taskHTML += '<label class="custom-control custom-checkbox">';
  taskHTML += '<input type="checkbox" class="custom-control-input">';
  taskHTML += '<span class="custom-control-indicator"></span>';
  taskHTML += '<span class="custom-control-description">'
  taskHTML += $("#taskInput").val() + '</span>';
  taskHTML += '</label>';
  taskHTML += '<a href="#" class="delete"><i id="removeTask" class="fa fa-times fa-lg" aria-hidden="true"></i></a></div>'

  // Insert task into list
  $("#taskList").append(taskHTML);


  // Reset input value
  $("#taskInput").val("");
  
  enableSubmitEvent();

 }); //End event - add task to list

 // Delete Task from List
 $("a").click(function() {
  $(this).parent().remove();
 });

 // Change task completion status
 $("input[type='checkbox']").click(function() {
  // $(this).siblings(".custom-control-description").css("background-color", "red");
  $(this).siblings(".custom-control-description").toggleClass("complete");

 });


 function canSubmit() {
  return ($("#taskInput").val().length > 0);
 };

 function enableSubmitEvent () {
  $("#submitButton").prop( "disabled", !canSubmit() );
 };

 // Checks if there is input while typing
 // $("#taskInput").focus(enableSubmitEvent).keyup(enableSubmitEvent);
 $("#taskInput").keyup(enableSubmitEvent);


 enableSubmitEvent();

.container {
 border-radius: 20px;
 max-width: 600px;
 /*border: 1px solid #838181;*/
 box-shadow: .5px .5px 4px 4px rgba(64, 117, 238, .28);
}

.complete {
 color: #c7c6c8;
 text-decoration: line-through;
}

#taskList {
 background-color: white;
 color: black;
}

#title {
 font-family: 'Gloria Hallelujah', cursive;
 text-shadow: 2px 2px 2px #3f397d;
 font-size: 3em;
}

a {
 color: #d4d0d0;
}

i {
 margin-top: 7px;
}

<!doctype html>
<html lang="en">
  <head>
    <title>To Do List</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://use.fontawesome.com/fa18f89c43.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <!-- Style Css -->
    <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body class="bg-light text-white">

    <!-- Container -->
    <div class ="container my-5 bg-info py-4 px-1">
      <h1 id="title" class="text-center">To Do List</h1>

      <!-- Form group task items -->
      <div id="taskList" class="form-group">
        <div class="form-check d-flex w-100 justify-content-between p-1 m-0 border border-info">
          <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Do Laundry</span>
          </label>
          <a href="#"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
        </div>
        <div class="form-check d-flex w-100 justify-content-between p-1 m-0 border border-info">
          <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Grocery Shopping</span>
          </label>
          <a href="#"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
        </div>
        <div class="form-check d-flex w-100 justify-content-between p-1 m-0 border border-info">
          <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Learn Code</span>
          </label>
          <a href="#"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
        </div>    

      </div> <!-- end form group -->

      <!-- Add task -->
      <div class="input-group">
        <input id="taskInput" type="text" class="form-control" placeholder="Add Task..." aria-label="Add Task...">
        <span id="taskButton" class="input-group-btn">
        <button id="submitButton" class="btn btn-secondary" type="button">Add!</button>
        </span>
      </div>

    </div> <!-- end Container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <!-- JS -->
    <script src="app.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

score 0 · Answer 1 · answered Oct 23 '17 at 00:16

Try a delegated event listener, like this:

$(document).on('click', 'input[type='checkbox']', function() {
     $(this).siblings(".custom-control-description").toggleClass("complete");
});

When an element is being dynamically created, a normal click event won't work. You have to use something like this if it is being added to the DOM after it is loaded

score 0 · Answer 2 · answered Oct 23 '17 at 00:17

0

You should use .on as it will bind new elements that you will append dynamically in the DOM. It is must when playing with dynamic elements. Like

$("#taskButton").on('click',function(){})

answered Oct 23 '17 at 00:17

Tushar

11,306
1
21
41

No, `.on()` only works for dynamically appended elements if you provide the appropriate arguments, which the example shown here doesn't do. Check [Marco's answer](https://stackoverflow.com/a/46880412/615754) for an example. – nnnnnn Oct 23 '17 at 02:31

Inserting HTML with JQuery, but JQuery and CSS styles are not being applied to new HTML

2 Answers2