javascript - 从 JQuery 列表中删除单击的项目

Question

我有一个简单的列表，您可以在其中添加 html/jquery 中的项目。我想在单击列表中的特定项目时删除它。我可以添加项目，它们会显示，但删除代码不起作用。

删除代码

$('#items a.delete').on('click', function(){
$(this).parent().remove();
});

这是我的代码:

$(document).on('pagebeforeshow', '#home', function(event) {
homepage();
});

$('#items a.delete').on('click', function(){
 $(this).parent().remove();
});

function homepage(){
   // Fetch the existing objects
   objects = getObjects();

   // Clear the list
   $('#items').find('li').remove();

   // Add every object to the objects list
   $.each(objects, function(index, item){
       element = '<li data-icon="delete"><a href="#" class="delete">'+item.title+'</a></li>';

       $('#items').append(element);
   });

   $('#items').listview();
   $('#items').listview("refresh");
}

function getObjects(){
   // See if objects is inside localStorage
   if (localStorage.getItem("objects")){
       // If yes, then load the objects
       objects = JSON.parse(localStorage.getItem("objects"));
   }else{
       // Make a new array of objects
       objects = new Array();

   }
   return objects;
}

当您进入页面时，homepage() 会被调用，它会重新填充列表。对象存储在本地存储中。

HTML: <ul id="items" data-role="listview" data-inset="true"></ul> <br>

Answer 1

在将事件附加到 DOM 之前，您需要绑定(bind)事件。当元素被附加时，您需要绑定(bind)事件after，或者使用事件委托(delegate)来查找该元素。一个可能的修复方法是移动此代码块

$('#items a.delete').on('click', function(){
    $(this).parent().remove();
});

调用 homepage() 函数后。