Question

在我的jQuery中，我添加了一系列li元素，每个li元素都有一个子元素按钮。我要做的是将click事件处理程序附加到按钮，单击时将删除按钮及其父li元素。这是我的HTML：

        <div id="empty_message" class="open">
            <h3>You have no tasks left to accomplish!</h3>
        </div>
        <div id="tasklist">
            <ol class="list" id="list">  
            </ol>
        </div>

这是我写的jQuery：

$("#add_task").click(function() {            
        //create a li, save input in there, and add to ol
        var new_task = $('<li></li>');
        new_task.text($("#add_todo").val());
        //new_task.attr('id', 'new_task');
        new_task.appendTo('ol.list');

        if (new_task)
        //create button and attach it to new li element
        var new_button = $('<input />').addClass('done');
        new_button.attr({
            type : "button",
            value : "Task Accomplished!"
        });
        new_button.appendTo(new_task);

    }

    $("#add_todo").val("").focus();

});
//end click event of Add task button

$('.done[value="Task Accomplished!"]').click(function() {
    $(function () {
        alert("This is working.");
    });
    //hide <li> element
    $(this).parentElement.remove();

    //if list is empty, show empty message
    if ($("#list li").length == 0)
        $("#empty_message").show();

    $("#add_todo").focus();
});
//end click event of Task Accomplished button

“添加任务”按钮（第一个功能）正在运行。我无法弄清楚为什么Task Accomplished按钮不起作用!!任何人都可以帮助我吗？

Answer 1

$("#add_task").on('click', function() {            
    //create a li, save input in there, and add to ol
    var new_task = $('<li />', {
        text : $("#add_todo").val()
    });

    var new_button = $('<input />', {
        'class' : 'done',
        type    : 'button',
        value   : 'Task Accomplished!',
        on      : {
            click : function() {
                $(this).closest('li').remove();
                if ($("#list li").length == 0) {
                    $("#empty_message").show();
                }
                $("#add_todo").focus();
            }
        }
    });

    $('#list').append(new_task.append(new_button));
    $("#add_todo").val("").focus();
});

在创建元素时创建事件处理程序，并使用closest代替parentElement。

用于按钮的单击事件的选择器

1 个答案: