當“輸入為空”警報不起作用時，如何選擇和刪除列表項

Question

 $(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> 

這是我到目前為止所做的，在此代碼中，我沒有收到警報“您在開玩笑嗎？ '，當輸入為空時，在#result單擊li時，我沒有收到警報，在選擇li后，我應通過單擊remove圖標將其刪除。

這是小提琴鏈接

Answer 1

您需要在更新按鈕單擊處理程序中檢查條件，並且檢查條件應為length == 0

$('#update').on('click', function() {
    if ($('#myText').val().length == 0) {
        alert('Are you Kidding ? ;)')
        return;
    }

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

此外，您可以綁定多個事件處理程序，例如

$('#myText').on("focus click", function() {
    $('#update').removeClass("gray_text");
    $('#update').addClass("show");
});

並使用.prop()方法來操作諸如disabled而不是attr()類的attr()

從jQuery 1.6開始， .prop()方法提供了一種顯式檢索屬性值的方法，而.attr()檢索屬性。

去除

動態生成元素時，需要使用.on（）委托事件方法使用事件委托。

一般語法

$(document).on('event','selector',callback_function)

舉個例子

$('#result ').on('click', 'li .glyphicon-remove', function() {
    alert('Clicked');
    $(this).closest('li').remove();
});

Answer 2

修改您的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();
});