Question

我在html5中有一个简单的购物清单应用。

以下是符合我要求的行为：

您可以点击$donebutton，然后将项目从#tbdlist移至#donelist。如果您意外执行此操作，$undobutton会将项目移回#tbdlist。

接下来会发生什么：

当我点击$donebutton第二（第三，第四）时间时，它应该将其从#tbdlist移回#donelist，但它没有。 $donebutton停止工作。我认为$delbutton也停止了工作。

有人可以帮助我了解正在发生的事情以及如何解决问题。我认为它与范围界定有关。 .click函数都在一个级别上，第二次我们在＆＃34;内部＆＃34; $donebutton.click函数，但这对我没有意义，因为变量是在顶层声明的。如果变量存在，则其方法应该存在。

提前致谢，奥马

HTML：

＆＃13;

$('form').submit(function(event){
	event.preventDefault();
    var $delbutton = $('<li><button class="delbutton">x</button><br></li>');
    var $listitem = $('<div></div>')
    var $donebutton = $('<li><button class="donebutton">' + $('#itemname').val() + '</button></li>');
    var $itemname = $('<li>'+ $('#itemname').val() + '</li>');
    var $nameday = $('<li>yourname</li><li>datetoday</li>');
    var $undobutton = $('<li><button class="undobutton">^</button><br></li>');
    var $doneitem = $('<span class="added"></span>');
    //var $doneitem = $('<div></div>');
    $listitem.append($donebutton);
    $listitem.append($nameday);
    $listitem.append($delbutton);
	$('#tbdlist').append($listitem);
	$('input').val('');
    $donebutton.click(function() {
        $doneitem.append($itemname);
        $doneitem.append($nameday);
        $doneitem.append($undobutton);
        $("#donelist").append($doneitem);
        $listitem.remove();
    });
    $delbutton.click(function() {
        $listitem.remove();
    });
    $undobutton.click(function(){
    //var $delbutton = $('<li><button class="delbutton">x</button><br></li>');
    //var $donebutton = $('<li><button class="donebutton">' + $('#itemname').val() + '</button></li>');
        $nameday = $('<li>yourname</li><li>datetoday</li>');
        $listitem = $('<div></div>')
        $listitem.append($donebutton);
        $listitem.append($nameday);
        $listitem.append($delbutton);
        $('#tbdlist').append($listitem); 
        $doneitem.remove();       
    });

});

function archive() {
    $('#donelist .added').remove();
}

$(document).ready(function(){

	alert("its on");

});

/* Jquery load test
window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
}
*/

＆＃13;

.hdr {
	text-align: center;
    color: black;
    font-weight: bold;
    background: lightblue; /* yellow */
    border: 2px solid black;
    padding: 1em;
}
#main{
	text-align: center;

}
#tbdlist {
		text-align: center;
		/*font-weight: bold;*/
		border: 1px solid black;
		list-style-type: none;
}

#donelist {
		text-align: center;
		/*font-weight: bold;*/
		border: 1px solid black;
		list-style-type: none;
}

#tbdlist li { 
	width:25%;
} 

#donelist li   { 
  width:25%; 
} <span class="code-comment">/* 4 col */</span>

#tbdlist ul, #donelist, ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
}
#tbdlist li, #donelist li{
  line-height:1.5em;
  float:left;
  display:inline;
}
/* {
	border-color: red;
}
*/
button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

＆＃13;

<html>
<head>
	<title>Shopping List App</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
	<header class="hdr">
		<h2 class="titleid">Shopping List App</h2>
	</header>
	<div id="main">
		<ul id="tbdlist">
			<li>Item</li>
			<li>Addedby</li>
			<li>Date</li>
			<li>Undo</li>
		</ul>
		<br>
		<div class="adder">
			<form>
			<input type="text" id="itemname" name="Item" Placeholder = "An Item"/>
			<br>by: username <br>
			on: today's date <br>
		</form>
		</div>
		<button onclick="archive()">Archive</button>
		<ul id="donelist">
			<li>Item</li>
			<li>Doneby</li>
			<li>Date</li>
			<li>Reget</li>		

		</ul>
	</div>
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="js/app.js"></script>
</body>
</html>

＆＃13;

Answer 1

您可能遇到的一个问题是，通过使用相同的jQuery对象，将其传递给append将从DOM中的当前位置删除，而不是添加新元素。对于在页面上出现多次的元素，你也使用了id，当那些应该真正使用类时。

基本上，您的单击处理程序应该每次重新查询元素的DOM，而不是简单地引用相同的jQuery对象。

Answer 2

尝试更改

$(selector).click(function() {

});

到

$(document).on('event', 'selector', function () {

});

button.click在两次删除附加操作后无法正常工作

2 个答案: