单击事件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); 
     } 
    }); 
}); 

演示：Fiddle