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（），它会重新填充列表。对象存储在localstorage中。

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

Answer 1

您正在之前绑定事件，并将它们附加到DOM。然后，当附加元素时，您需要在之后绑定事件，或使用事件委派来查找该元素。可能的解决方法是移动此代码块

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

调用homepage（）函数后。

Answer 2

您正在动态添加新元素，因此您需要在事件绑定上定位父元素：

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

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

2 个答案: