JS：在生成選擇選項時附加一個clicklistener

我正在創建一個在線比薩餅送貨服務的對象的小項目上有一個名爲pizzaPreviewList的元素，該元素充滿了數組比薩餅中的數據。JS：在生成選擇選項時附加一個clicklistener

現在我想刪除pizzaPreviewList中的一個項目，當它被點擊。我的方法如下。

購物車呈現：

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

比薩在創建新的選項項目獲得元素（）：

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方法會在元素被創建時自動調用，並且我的數組變得瘋狂，因爲它試圖刪除那些還沒有的東西。我該如何解決這個問題？

不允許使用框架。

來源

2016-11-21 Circuitous

需要HTML它*出現*你有多個節點在不同的位置。 – zer00ne

正如我所看到的，您將動態添加到頁面上。但事件處理程序（elementContainer.addEventListener('click', onClick());）在元素呈現在頁面上之前添加。

所以動態元素的事情是，你必須動態地添加它的處理程序。

要做到這一點，只需從這個 -

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()已經排除。

來源

2016-11-21 12:29:32

這會阻止我的渲染方法運行，因爲如果我先不使用createElement，並且沒有將onclick作爲有效數據添加，appendChild不再可行。 – Circuitous

它是否必須是選擇/選項元素？就個人而言，我會使用UL/LI（除非您需要下拉行爲），但無論如何，請將點擊事件附加到UL，而不是LI。然後，您可以添加/刪除儘可能多的LI，而不需要噸事件監聽器。單擊時，獲取事件的目標並使用target.parentNode.removeChild（target）刪除。 – WindsorAndy

JS：在生成選擇選項時附加一個clicklistener

回答

相關問題