0
$(document).ready(function() {
$("body").tooltip({
selector: '[data-toggle=tooltip]'
});
});
var unique_id=0;
$('#update').on('click', function() {
if ($('#myText').val().length == 0) {
alert('Are you Kidding ? ;)')
return
}
unique_id++;
$('#result').append('<li>' + '<input id="checkboxFourInput" type="checkbox" class="todo-item" /> <label for="checkboxFourInput"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
// $('#myText').val("").attr("disabled", "disabled");
// update value
$('#myText').val('').change();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
});
$('#edit').on('mouseup', function() {
console.log($('#myText'));
$('#myText').prop("disabled", false).focus().select();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
})
$('.hide').on("click", function() {
$('.hide').removeClass("show");
});
$('#result ').on('click', 'li .glyphicon-remove', function() {
// alert('Clicked');
$(this).closest('li').remove();
});.editable_text{
margin: 20px;
/*padding: 15px;*/
border: 1px solid #ccc;
width: 300px;
border-radius: 5px;
background: white;
display: inline-block;
text-align: left;
}
ul#result{
padding: 0;
margin: 0;
position: relative;
top: -40px;
border-top: 1px solid #ccc;
}
#result li {
padding: 15px 25px;
border-bottom: 1px solid #ccc;
list-style: none;
font-size: 18px;
font-weight: 100;
color: #555;
letter-spacing: 1px;
width: 100%;
}
#myText{
margin: 0;
padding: 20px 30px 20px 40px;
border: transparent;
border-bottom: 1px solid #ccc;
position: relative;
/*left: -16px;*/
width: 100%;
top: -40px;
}
.btns{
width:100%;
position: relative;
padding: 20px 0;
}
.plus {
padding: 0 20px;
cursor: pointer;
position: relative;
right: 2px;
z-index: 1;
}
.okay{
float: right;
position: relative;
right: -2px;
top: 0px;
padding: 0 20px;
cursor: pointer;
z-index: 1;
}
.gray_text{
opacity: 0.2;
color: #222;
}
.show{
opacity: 1;
color: blue;
}
input[type=checkbox] {
visibility: hidden;
}
#result label {
cursor: pointer;
position: absolute;
width: 24px;
height: 24px;
top: 15px;
left: 15px;
background: #fff;
border: 1px solid #4AADF1;
border-radius: 100%;
}
#result label:focus{
background: #4AADF1;
}
#result label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 12px;
height: 5px;
left: 5px;
top: 7px;
background: transparent;
border: 2px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/**
* Create the hover event of the tick
*/
#result label:hover::after {
opacity: 0.5;
}
/**
* Create the checkbox state for the tick
*/
#result input[type=checkbox]:checked + label:after {
opacity: 1;
}
#result input[type=checkbox]:checked + label{
background: #4AADF1;
}
.todo-item-del{
text-align: right;
float: right;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<div class="editable_text">
<div class="btns">
<a id="edit" class="pull-left plus" data-toggle="tooltip" data-placement="bottom" title="Click to Add">
<i class="glyphicon glyphicon-plus"></i>
</a>
<a id="update" class="gray_text okay" data-toggle="tooltip" data-placement="right" title="Click to Okay">
<i class="glyphicon glyphicon-ok"></i>
</a>
</div>
<input type='text' id="myText" placeholder="Add new goals"/>
<ul id="result"></ul>
</div>
</div>您好，
我想实现一个待办事项列表中用于自己的管理控制台，在那里我得到了strucked，在这里，我在我的待办事项列表中追加了一个li作为一个项目，这是第一次它工作正常，我得到checkbox这也正在工作，但是当创建第二个待办事项时，它正在出错，并且复选框不起作用。
这里，我是想，但力的代码获得成功
$('#result').append('<li>' + '<input "$(this).attr("id",$(this).attr("id")+"_"+(unique_id))" type="checkbox" class="todo-item" /> <label for="(unique_id)"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
以下是小提琴link
谢谢@Fabricator –