События по щелчку и динамически созданные элементы в неупорядоченном списке

// You need to use event delegation to handle the existing and dynamically created elements
$(document).on("click", ".todo-item", function(){
  $(this).toggleClass("strike"); 
});

$(document).on("click", ".far", function(){
  // No need to stop propagation on this event
  $(this).parent().fadeOut("slow");
});

$("#search-id").on('keypress', function(e) {
  let input= $(this).val();
  if (e.which === 13 && input !== "") { 
    $("<div class='todo-item'><hr class='divider'><i class='far fa-square'>X </i>" + input + "</div>" ).appendTo("#list-todo");
    $("#search-id").val("");
  }
});

/* This simple class replaces your mouseenter and mouseleave event handlers */
.todo-item:hover { background-color:#E3E1E1; }

/* You didn't have the . before the class name */
.strike {
	text-decoration: line-through;
	color:#D6D1D1;
}

.fas { padding-left: 140px; }

#todo-div{
	width:400px;
	margin-right: auto;
	margin-left: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#list-todo{
	background-color: white;
	padding:0;
	padding-left: 2px;
}


/* You were hard-coding width:100% into each <hr>, but:
  1) width:100% is the default for <hr> anyway
  2) even if it wasn't, you should put the CSS here and not in the tags */
.divider { margin: 0em; border-width: 1px; color:grey; }

<link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type = "text/css" rel = "stylesheet">
<div id = "todo-div">
  <div id = "list-header">To do list<i class = "fas fa-plus"></i></div>
  <input type = "text" name = "" class = "form-control" id = "search-id" placeholder = "Add to-do item here">
  <ul id = "list-todo">
    <div class = "todo-item">
      <hr class = "divider" color = "grey">
      <i class = "far fa-square">X </i>Study for itp-303
    </div>	
    <div class = "todo-item" >
      <hr class = "divider" color = "grey">
      <i class = "far fa-square">X </i>Do laundry
    </div>    		
    <div class = "todo-item" >
      <hr class = "divider" color = "grey">
      <i class = "far fa-square">X </i>Make Dinner
    </div>
  </ul>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>