Question

我在使用foreach绑定绑定到knockout可观察数组的容器div中有一些div。这很好用。

在knockout afterAdd事件中，我使用jQuery为（新创建的）div的click事件创建一个监听器：

                 mydiv.click(function () { 
                    // delete the corresponding item from 
                    // the observable array                     
                    self.myobservableArray.splice($(this).index(), 1);
                });

单击div会删除它。 div从视图中消失。这很好用。

我也让每个div都可以拖动：

                 mydiv.draggable({revert:"invalid"});

拖放工作正常。

但是，如果我将div 拖放到可放置的之后点击它，它就不会消失;它要么紧紧抓住可放置的物体，要么放置在可放置的物体上。它需要再次点击div才能将其遗忘。

我可以采取哪些措施来解决此问题吗？

Answer 1

我猜它与事件有关（在同一个元素上注册多个事件），这是我的例子，它在第一次点击时工作（关闭） jsfiddle.net/dhanasekaran/P9C7E

<div data-bind="foreach:items">
    <a href="#" class="item" data-bind="draggable:true,droppable:true">
        <span  data-bind="text:$data"></span>
        <i data-bind="click:$parent.remove">X</i>
    </a>
</div>

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};

ko.bindingHandlers.droppable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).droppable();
    }
};

var vm=function(){
    var self=this;
    self.items=ko.observableArray();
    self.init=function(){
        self.items(['One','Two','Three','Four','Five','Six']);
    }
    self.remove=function(item){
        console.log(item);
        self.items.remove(item);
    }
    self.init();
}

ko.applyBindings(new vm());

Knockout observableArray绑定与JQuery拖放：不良行为

1 个答案: