-1
問題：折りたたみ可能なものよりも「サファリ」の入力を押して「する」タスクを追加するときに、「週」タブが複製されます。そして、どんな仕事も加えました。追加タスクの作業が正しくない
それは私を助けることができる、間違った
をどこに行くか私は知らないのですか？
HTML
<!DOCTYPE html>
<html>
<head>
<title>planIt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="https://use.fontawesome.com/e886da0b59.js"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- jquery custom -->
<script type="text/javascript" src="js/script.js"></script>
<!-- jquery mobile -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- jquery ui -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- touch -->
<script src="js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div data-role="page" id="pagedag">
<div id="header" data-role="header" style="overflow:hidden;">
<div class="logo"></div>
<a href="#overlayPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div><!-- /header -->
<div data-role="panel" id="overlayPanel" data-display="overlay">
<div class="logo"></div>
<p>Dag</p>
<p>Week</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left"></a>
</div>
<div data-role="tabs" id="tabs">
<div data-role="navbar" class="custom-navbar">
<ul>
<li><a href="#dag" class="ui-btn-active" data-ajax="false">dag</a></li>
<li><a href="#week" data-ajax="false">week</a></li>
</ul>
</div>
<!--- dag --->
<div id="dag" class="ui-body-d ui-content">
<h1>Tijdlijn...</h1>
<div data-role="collapsible">
<h4>To Do</h4>
<p>Hoi</p>
<form name="toDoList">
<input type="text" name="ListItem"/>
</form>
<button id="button" class="ui-btn">Add</button>
</div>
<div data-role="collapsible">
<h4>Progress</h4>
<p>Hoi2</p>
<div id="progress">
<ol id="sortableProgress"></ol>
</div>
</div>
<div data-role="collapsible">
<h4>Done</h4>
<p>Hoi3</p>
<div id="done">
<ol id="sortableDone"></ol>
</div>
</div>
</div>
<!--- einde dag --->
<!--- week --->
<div id="week" class="ui-body-d ui-content">
<h1>Tijdlijn...</h1>
<div data-role="collapsible">
<h4>To do</h4>
<p>Hoi</p>
<form name="toDoList">
<input type="text" name="ListItem"/>
</form>
<button id="button" class="ui-btn">Add</button>
</div>
<div data-role="collapsible">
<h4>Progress</h4>
<p>Hoi2</p>
<div id="progress">
<ol id="sortableProgress"></ol>
</div>
</div>
<div data-role="collapsible">
<h4>Done</h4>
<p>Hoi3</p>
<div id="done">
<ol id="sortableDone"></ol>
</div>
</div>
</div>
<!--- einde week --->
</div>
<div id="header" data-role="header" style="overflow:hidden;">
<p>© planIT</p>
</div><!-- /footer -->
</div>
</body>
</html>
CSS
header, section {
display: block;
color: #fff;
}
body{
margin: 0px;
padding: 0px;
background: #1abc9c;
font-family: 'Lato',sans-serif;
}
h1{
color: #000;
text-align: center;
margin-top: 20px;
}
.logo{
content: url(assets/planit.png);
height: 80px;
width: auto;
margin: auto;
padding: 8px;
}
/* header */
#header {
background-color: #fff;
}
/* button dag/week */
.custom-navbar ul li a {
background: #eee; /* Old browsers */
background: -moz-linear-gradient(#eee, #eee) !important; /* FF3.6+ */
background: -webkit-linear-gradient(#eee, #eee) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#eee, #eee) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(#eee, #eee) !important; /* IE10+ */
border: none;
letter-spacing: 1px;
font-weight: normal;
}
.custom-navbar ul li a.ui-btn-active {
background: #57cb98; /* Old browsers */
background: -moz-linear-gradient(#57cb98, #57cb98) !important; /* FF3.6+ */
background: -webkit-linear-gradient(#57cb98, #57cb98) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#57cb98, #57cb98) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(#57cb98, #57cb98) !important; /* IE10+ */
border: none;
letter-spacing: 1px;
font-weight: normal;
}
/* collapse */
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
border-right-width: 1px;
border-left-width: 1px;
background-color: #57cb98;
color: #fff;
letter-spacing: 1px;
font-weight: normal;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn:hover {
border-right-width: 1px;
border-left-width: 1px;
background-color: #38b77f;
color: #fff;
letter-spacing: 1px;
font-weight: normal;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
body {
font: normal normal 13px/16px "Open Sans", sans-serif;
background: #ccc;
}
.container{
padding: 20px;
width: 300px;
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;}
form {
display: inline-block;
}
input{
padding: 4px 15px 4px 5px;
}
#button{
display: inline-block;
background-color:#fc999b;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
padding: 5px 15px;
}
#button:hover{
cursor: pointer;
opacity: .8;}
ol {padding-left: 20px;}
ol li {padding: 5px;color:#000;}
ol li:nth-child(even){background: #dfdfdf;}
.strike{text-decoration: line-through;}
li:hover{
cursor: pointer;
}
jQueryの
$(document).ready(
function(){
$('#button').click(
function(){
var toAdd = $('input[name=ListItem]').val();
$('#sortableProgress').append('<li>' + toAdd + '</li>');
});
$("input[name=ListItem]").keyup(function(event){
if(event.keyCode == 13){
$("#button").click();
}
});
$(document).on('dblclick','li', function(){
$(this).toggleClass('strike').fadeOut('slow');
});
$('input').focus(function() {
$(this).val('');
});
$('#sortableProgress').sortable();
}
);
$（ '入力[名前=のListItem]'）$でなければなりません（ "入力[名前= 'のListItem']"） – Bindrid
あなたのリターンキーをキャッチする必要がありますキーダウン付き – Bindrid