淘汰赛无法使用FireFox删除新添加的项目到observableArray？

Question

我有一个小页面，其中列出了来自 Knockout 数组的数据，并且每个项目都有删除链接。单击链接旁边的删除链接项目将从数组中删除，但我无法删除新添加的项目。

JSFiddler：enter link description here

这是我的代码：

<input type="text" data-bind="value: tagToAdd, valueUpdate: 'afterkeydown'" />
<button data-bind="click: addTag">+ Add</button>
<div data-bind="foreach: tags">
    <span data-bind="text: Name"></span>    
    <a href="#" class="deleteItm">Delete </a>       
</div>

这里是JS代码：

var data = [
    { Id: 1, Name: "abc" },
    { Id: 2, Name: "def" },
    { Id: 3, Name: "ghi" },
    { Id: 4, Name: "jkl" }
];

var viewModel = function () {
    var self = this;
    //data
    self.tags = ko.observableArray(data);
    self.tagToAdd = ko.observable();

    //behaviour
    self.addTag = function () {
        self.tags.push({ Name: self.tagToAdd() });
        self.tagToAdd("");
    };
};


$(function () {
    var vm = new viewModel();
    ko.applyBindings(vm);

    $(".deleteItm").on("click", function () {
        var itmToRemove = ko.dataFor(this);
        console.log(itmToRemove);
        vm.tags.remove(itmToRemove);

        ko.applyBindings(vm);


    });

问题/问题： 我需要让这段代码删除新（动态）添加的项目。如果我添加一个新项目并删除它不起作用但删除来自 JS 的项目

编辑： 我刚刚检查过它在 FF 中不起作用

Answer 1

您需要使用 event delegation 将事件绑定到动态添加的 DOM：

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

$("body").on("click",'.deleteItm', function () {
    var itmToRemove = ko.dataFor(this);
    console.log(itmToRemove);
    vm.tags.remove(itmToRemove);

    ko.applyBindings(vm);
});

Answer 2

最好的办法是不使用jQuery本身，而是使用knockout来移除item。

self.deleteItem = function(item) {
  self.tags.remove(item)
};

<a href="#" class="deleteItm" data-bind="click: $root.deleteItem">Delete </a>