Question

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

这是我的代码：

<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

最好的方法是不使用jQuery本身，而是使用knockout删除项目。

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

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

Answer 2

您需要使用 event delegation 来绑定事件以动态添加DOM：

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

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

    ko.applyBindings(vm);
});

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

2 个答案: