$(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();
});

10-05 20:55
查看更多