JS: Прикрепите clicklistener при создании опции выбора

Question

Я работаю над небольшим проектом с целью создания онлайн-службы доставки пиццы, имеет элемент pizzaPreviewList, который заполняется данными из пиццы Array.

Теперь я хочу удалить элемент в pizzaPreviewList, когда он щелкнут. Мой подход был следующим.

Корзина делает:

self.render = function() { 
     self.pizzaPreviewElement.innerHTML = ""; 
     for(var k in self.pizzas) { 
      var element = self.pizzas[k].getElement(); 
      self.pizzaPreviewElement.appendChild(element); 
     } 
    }; 

Pizza создает новый Option элемент в получить элемент():

self.getElement = function() { 
     var elementContainer = document.createElement('option'); 
     elementContainer.innerHTML = '<span>'+ self.name + ' ' + self.preis.toFixed(2) + '€</span>'; 
     elementContainer.addEventListener('click', onClick()); 

     return elementContainer; 
    }; 

OnClick затем предполагается запустить метод, который удаляет Пицца и повторно выводит, но OnClick автоматически вызывается, когда элемент создается, а мой массив сходит с ума, потому что он пытается удалить вещи, которых еще нет. Как я могу это решить?

Использование рамок не допускается.

Answer 1

Как я вижу, вы добавляете элементы динамически на страницу. Но обработчик события (elementContainer.addEventListener('click', onClick());) добавляется до отображения элемента на странице.

Итак, вещь с динамическими элементами заключается в том, что вы также должны динамически добавлять свои обработчики.

Чтобы сделать это, просто изменить строки из this-

var elementContainer = document.createElement('option'); 
elementContainer.innerHTML = '<span>'+ self.name + ' ' + self.preis.toFixed(2) + '€</span>'; 
elementContainer.addEventListener('click', onClick()); 

в эту линию -

var elementContainer = '<option onclick="onClick()"><span>'+ self.name + ' '+self.preis.toFixed(2) + '€<span><option>'; 

UPDATE

, то вы можете изменить ваш render() функцию и поставить возвращаемая строка в self.pizzaPreviewElement.innerHTML вместо self.pizzaPreviewElement.appendChild(element);

Просто убедитесь, что функция onClick() exixts перед добавлением элемента на страницу.