Question

我正在开展一个小项目，其目标是创建一个在线披萨派送服务，其中有一个名为pizzaPreviewList的元素，它充满了来自Array pizzas的数据。

现在我想删除pizzaPreviewList中的一个Item，当它被点击时。我的方法如下。

购物车呈现：

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

Pizza在get 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应该运行一个删除Pizza和rerenders的方法，但是在创建元素时我会自动调用onClick，并且我的Array会疯狂，因为它会尝试删除尚未存在的东西。我该如何解决这个问题？

不允许使用框架。

Answer 1

正如我所看到的，您正在动态地将元素附加到页面。但是在页面上呈现元素之前添加了事件处理程序（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>';

更新

然后您可以修改render()函数并将返回的字符串放在self.pizzaPreviewElement.innerHTML中，而不是使用self.pizzaPreviewElement.appendChild(element);

在将元素追加到页面之前，只需确保函数onClick()出现。

JS：生成select-option时附加一个clicklistener

1 个答案: