0
我在html5中有一個簡單的購物清單應用程序。button.click兩個刪除附加動作後不工作
這裏是因爲我想的作品的行爲：
您可以點擊$donebutton並將其移至該項目從#tbdlist到#donelist。如果您意外執行此操作，則$undobutton會將該項目移回#tbdlist。
這是應該發生的下一個什麼：
當我在$donebutton單擊第二（第三，第四）的時候，它應該回來從#tbdlist移動到#donelist，但事實並非如此。 $donebutton停止工作。我認爲$delbutton也停止工作。
有人可以幫助我瞭解發生了什麼以及如何解決它。我認爲這與範圍界定有關。 .click函數都在同一個級別上，第二次我們在$donebutton.click函數的「內部」，但這對我來說沒有意義，因爲變量是在頂層聲明的。如果變量存在，它的方法應該存在。
由於提前， 奧馬爾
HTML：
$('form').submit(function(event){
\t 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);
\t $('#tbdlist').append($listitem);
\t $('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(){
\t 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");
}
}
*/.hdr {
\t text-align: center;
color: black;
font-weight: bold;
background: lightblue; /* yellow */
border: 2px solid black;
padding: 1em;
}
#main{
\t text-align: center;
}
#tbdlist {
\t \t text-align: center;
\t \t /*font-weight: bold;*/
\t \t border: 1px solid black;
\t \t list-style-type: none;
}
#donelist {
\t \t text-align: center;
\t \t /*font-weight: bold;*/
\t \t border: 1px solid black;
\t \t list-style-type: none;
}
#tbdlist li {
\t 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;
}
/* {
\t 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;
}<html>
<head>
\t <title>Shopping List App</title>
\t <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
\t <header class="hdr">
\t \t <h2 class="titleid">Shopping List App</h2>
\t </header>
\t <div id="main">
\t \t <ul id="tbdlist">
\t \t \t <li>Item</li>
\t \t \t <li>Addedby</li>
\t \t \t <li>Date</li>
\t \t \t <li>Undo</li>
\t \t </ul>
\t \t <br>
\t \t <div class="adder">
\t \t \t <form>
\t \t \t <input type="text" id="itemname" name="Item" Placeholder = "An Item"/>
\t \t \t <br>by: username <br>
\t \t \t on: today's date <br>
\t \t </form>
\t \t </div>
\t \t <button onclick="archive()">Archive</button>
\t \t <ul id="donelist">
\t \t \t <li>Item</li>
\t \t \t <li>Doneby</li>
\t \t \t <li>Date</li>
\t \t \t <li>Reget</li> \t \t
\t \t </ul>
\t </div>
\t <script src="js/jquery-1.11.2.min.js"></script>
\t <script src="js/app.js"></script>
</body>
</html>