單擊事件UI按鈕jQuery

Question

我正在建立一個簡單的購物清單。 當前，當您單擊列表項本身上的任意位置時，我的代碼將刪除添加的列表項，我希望它可以正常工作，只要單擊它旁邊的UI按鈕，即可從列表中刪除整個項目，而我嘗試過的操作只會刪除UI按鈕本身。 感謝您的幫助，我非常新手

HTML

<div id="list">
    <ul class="shopping"></ul>
</div>

jQuery的

$(document).ready(function () {
function addItemToList(e) {
    var addItem = $('#item').val();
    $('.shopping').append('<li>' + '<button class="uibutton"></button>' + addItem + '</li>');
    $('.uibutton').button({
        icons: {
            primary: "ui-icon-heart"
        },
        text: false
    });
    $('ul').on('click', 'li', function() {
    $(this).remove();
});
    $('#item').val('');
}

/*adds list item to list when cart icon is clicked, clears #item input field*/
$('#toadd').click(function (e) {
    addItemToList(e);
});

/*adds list item to list when enter key is hit, clears #item input field*/
$('#item').keydown(function (e) {
    if (e.which == 13) {
        addItemToList(e);
    }
});

}）;

Answer 1

您可以進行2項更改，例如

$(document).ready(function () {
    function addItemToList(e) {
        var addItem = $('#item').val();
        var $li = $('<li>' + '<button class="uibutton"></button>' + addItem + '</li>').appendTo('.shopping');

        //target only newly added button
        $li.find('.uibutton').button({
            icons: {
                primary: "ui-icon-heart"
            },
            text: false
        });
        $('#item').val('');
    }

    //use event delegation instead of adding the handler in another event handler... 
    $('ul.shopping').on('click', '.uibutton', function () {
        $(this).closest('li').remove();
    });

    /*adds list item to list when cart icon is clicked, clears #item input field*/
    $('#toadd').click(function (e) {
        addItemToList(e);
    });

    /*adds list item to list when enter key is hit, clears #item input field*/
    $('#item').keydown(function (e) {
        if (e.which == 13) {
            addItemToList(e);
        }
    });
});

演示： 小提琴