$(document).ready(function() {
$("body").tooltip({
selector: '[data-toggle=tooltip]'
});
});
$('#update').on('click', function() {
$('#result').append('<li>' + '<input type="checkbox" class="todo-item" />' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
// $('#myText').val("").attr("disabled", "disabled");
// update value
$('#myText').val('').change();
});
if ($('#myText').val().length != 0) {
alert('Are you Kidding ? ;)')
}
$('#edit').on('mouseup', function() {
console.log($('#myText'));
$('#myText').attr("disabled", false).focus().select();
});
$('#myText').on('focus', function() {
$('#myText').on("click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
})
})
$('.hide').on("click", function() {
$('.hide').removeClass("show");
});
$('#result li').on('click', function() {
alert('Clicked');
});
input{
padding:10px;
}
.editable_text{
width:300px;
}
.glyphicon{
padding: 10px;
}
#result{
padding:0px;
margin:0px;
list-style:none;
}
#result li {
border-bottom:1px solid #ccc;
padding:15px;
width:100%;
height:50px;
line-hieght:50px;
}
.todo-item{
margin-right: 15px !important;
height: 20px;
width: 20px;
color:green;
}
.todo-item-del{
text-align:right;
float:right;
color:red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.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>
这是我到目前为止所做的,在此代码中,我没有收到警报“您在开玩笑吗? ',当输入为空时,当单击
li
中的#result
时,我没有收到警报,在选择li
之后,我应该通过单击删除图标将其删除。这是小提琴Link
最佳答案
修改您的update
-函数,如下所示:
$('#update').on('click', function() {
if ($('#myText').val().length == 0) {
alert('Are you Kidding ? ;)');
return; //end if item shouldn't be added
}
$('#result').append('<li>' + '<input type="checkbox" class="todo-item" />' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
// update value
$('#myText').val('').change();
});