Question

我正在尝试创建一个待办事项列表，用户可以在其中单击列表中项目的文本，它将在文本中划出一行。用户还可以通过在文本输入栏中输入内容，将新项目添加到待办事项列表中。当我第一次加载页面时，我将一些项目硬编码到列表中，并且当我单击这些项目的文本时，所有项目都可以正常工作。当我在输入栏中输入文本并首次创建一个新对象时，它仍然可以继续正常工作。但是，当我创建第二个新对象时，事情开始有些奇怪。当我单击新创建的对象的文本时，该行可以顺利通过，但是当我单击前一个对象的行时，则什么也没有发生，并且我不知道为什么。

$('.todo-item').on("mouseenter", function(){
		$(this).css("background", "#E3E1E1");
	});
	$('.todo-item').on("mouseleave", function(){
		$(this).css("background", "white");
	});
	$('.todo-item').on("click", function(){
		$(this).toggleClass("strike");
	});
	$('.far').on("click",function(event){
		event.stopPropagation();
		$(this).parent().fadeOut("slow");
	});
	$(document.body).delegate('input:text', 'keypress', function(e) {
    if (e.which === 13&&$("#search-id").val()!="") { // if is enter
        e.preventDefault(); // don't submit form
        let input=$("#search-id").val();
        $( "<div class='todo-item'><hr width='100%'' class='divider' color='grey'><i class='far fa-square'></i>"+input+"<div>" ).appendTo( "#list-todo" );
        $("#search-id").val("");
    }
    $('.todo-item').on("mouseenter", function(){
		$(this).css("background", "#E3E1E1");
	});
	$('.todo-item').on("mouseleave", function(){
		$(this).css("background", "white");
	});
	$('.todo-item').on("click", function(){
		$(this).toggleClass("strike");
	});
	$('.far').on("click",function(event){
		event.stopPropagation();
		$(this).parent().fadeOut("slow");
	});

    });

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;
}
.divider{
	margin: 0em;
    border-width: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 width="100%" class="divider" color="grey">
    			<i class="far fa-square">				
    			</i>Study for itp-303
    		</div>	
    		<div class="todo-item" >
    			<hr width="100%" class="divider" color="grey">
    			<i class="far fa-square">   				
    			</i>Do laundry
    		</div>    		
    		<div class="todo-item" >
    			<hr width="100%" class="divider" color="grey">
    			<i class="far fa-square">   				
    			</i>Make Dinner
    		</div>
    	</ul>
    </div>

Answer 1

这比您制作的要简单得多。使用简单的CSS替换mouseenter和mouseleave和event delegation来设置click事件，以便动态创建的元素将绑定有事件处理程序。

查看内联评论：

// 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>

点击事件和无序列表中动态创建的项目

1 个答案: