Question

我可以删除数组中的项目，只要我不尝试先将数据添加到数组中。否则我无法从我的阵列中删除项目。我知道这听起来令人困惑所以我添加了一个jsfiddle来展示。 JSFiddle：http://jsfiddle.net/trav5567/3s64o1ta/5/

任何帮助都会很棒：）

的javascript

function testArray() {
    var Fruit = ['apple', 'bannanna', 'rasberry', 'watermelon', 'grape', 'orange'];
    var errorMsg = $('.errorMsg');
  function initArray() {
    loopArray();
  }
  initArray();

 function myFruit() {

    $('#addFruit').on('click', function (e) {
        e.preventDefault();
        var flag = true;
        var val = $('#fruitAdd').val();
        for (var i = 0; i < Fruit.length; i++) {
            if (Fruit[i] == val) {
                flag = false;
                errorMsg.find('p').removeClass();
                errorMsg.find('p').addClass('error');
                errorMsg.find('p').text('already entered this item');
            }
        }
        if (flag) {
          Fruit.push(val);
          loopArray();
          errorMsg.find('p').removeClass();
          errorMsg.find('p').addClass('correct');
          errorMsg.find('p').text('Item has been added');

        }
    });
  }
  myFruit();

  function loopArray() {
     var fruitList = $('ul.fruit');
     var arrayContainer = $('.arrayContainer');
     fruitList.empty();
     for (var i = 0; i < Fruit.length; i++) {
         fruitList.append('<li>' + Fruit[i] + '</li>');
     }
  }

  var itemClicked = $('ul.fruit li');
  itemClicked.on('click', function () {
    $(this).remove();
    var item = $(this).text();
    var index = Fruit.indexOf(item);
    Fruit.splice(index,1);
    errorMsg.find('p').removeClass();
    errorMsg.find('p').text('Item has been removed');
 });


 }
 testArray();

Answer 1

如果要处理动态添加元素的事件，则必须使用事件delegation：

$('ul.fruit').on('click', 'li', function () {
    $(this).remove();
    var item = $(this).text();
    var index = Fruit.indexOf(item);
    Fruit.splice(index,1);
    errorMsg.find('p').removeClass();
    errorMsg.find('p').text('Item has been removed');
});

这个想法是你在父元素（ul.fruit）上绑定一个事件处理程序，它将处理从子节点冒泡的所有点击事件。

Answer 2

更改

itemClicked.on('click', function () {

到

$('body').on('click', 'ul.fruit li', function () {

说明：

click事件应附加到body.Because因为所有li都是在加载文档后加载的。

一旦我向我的数组添加一个项目，我就无法从我的数组中删除一个项目

2 个答案: