我正在构建一个简单的 Grocery List 应用程序，但在尝试删除占位符 div 元素时遇到问题。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Grocery List App</title>
<link type="text/css" href="style/form.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<div id="left_side">
<div id="to_buy">To Buy:</div>
</div>
<div id="right_side">
<div id="in_cart">In Cart:</div>
</div>
</div>
<input type="text" id="item_body" placeholder="Type Item to Add">
<script src="scripts/jquery-1.11.2.min.js"></script>
<script src="scripts/grocery.js"></script>
<script src="scripts/jquery-ui/jquery-ui.js"></script>
</body>
</html>
JS
$(function () {
var rmv = false;
$('#item_body').keydown(function(e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable( {
axis: "x"
});
$(".draggable_item").dblclick(function() {
this.remove();
$('#in_cart > div:first').remove();
});
});
});
CSS
#to_buy {
float:left;
width: 50%;
height: 100%;
color: #00E5EE;
}
#in_cart {
float: left;
width: 49%;
height: 100%;
color: #00E5EE;
}
#container {
width:100%;
height: 100%;
}
#left_side {
height: 100%;
width: 50%;
float:left;
background: #5D5851;
}
#right_side {
height: 100%;
width: 50%;
float: left;
background: #6D5D4D;
}
#item_body {
float:left;
clear:both;
color: #326B62;
}
body {
background: #B1ADA5;
}
.draggable_item {
color: #FFF;
}
.holder {
height: 20px;
}
因此屏幕在“to_buy”和“in_cart”之间垂直分割。当我将一个元素添加到“to_buy”时，我还向“in_cart”添加了一个“虚拟”div，以便两侧保持均匀。但是，当我双击删除一个元素时，
$('#in_cart > div:first').remove();
被调用，第一个 div 被删除，然后在下一次双击两个，然后是四个等等。显然，它被多次调用或者其他奇怪的东西出错了。
最佳答案
这是因为您为每次按下 Enter 键时的双击事件绑定(bind)了事件处理程序，因此它们会在每次添加元素时相乘。只需将 dblclick 注册移到外面:
var rmv = false;
$('#item_body').keydown(function (e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable({
axis: "x"
});
});
$("#left_side").on("dblclick", ".draggable_item", function () {
this.remove();
$('#in_cart > div:first').remove();
});
另请注意，将双击事件委托(delegate)给父容器 #left_side 是有意义的，因此您不必担心在事件注册时是否存在元素。
关于javascript - 一次删除一个子 DIV 时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28314578/