为什么jQuery UI可拖动会干扰Knockout JS数据绑定？

Question

我想了解为什么在下面的代码中将包含div放入可拖动的jQuery UI中会改变Knockout JS数据绑定的行为.

在第一个div(可拖动)中,对输入框中的文本进行更改并立即单击"保存"不会导致更改反映在observable中.在第二个div(不可拖动)中,更改反映在observable中:

<div id='draggable'>
    <h3>Draggable</h3>
    <input data-bind='value: detail'></input>
    <span data-bind='click: saveEdit'>Save</span>
</div>
<div id='fixed'>
    <h3>Fixed</h3>
    <input data-bind='value: detail'></input>
    <span data-bind='click: saveEdit'>Save</span>
</div>

使用以下支持Javascript:

VM = {
    detail: ko.observable('Cat'),
    saveEdit: function(){
        alert(this.detail()); 
    }
};

$(document).ready(function() {
    $("#draggable").draggable();
    ko.applyBindings(VM);
});

你可以在这个jsFiddle看到代码:http://jsfiddle.net/NLzg2/

如果您将可拖动输入框中的文本更改为Cath并单击"保存",则警报会显示"Cat".但是,如果您在固定输入框中执行相同操作,警报将显示"Cath".所以在第二种情况下,Knockout检测到了价值的变化,而在第一种情况下它没有.

我知道我可以通过使用Knockout valueUpdate绑定来强制它在每次按键后更新绑定的observable,从而达到预期的效果.像这样:

<input data-bind='value: detail, valueUpdate: "afterkeydown"'></input>

我也知道如果我将<span>更改为<button>,我会得到我期望的行为.

我想了解的是为什么发生这种情况,我怎么能达到我想要的效果(即拖动的并具有正常的淘汰赛价值在其中的元素结合),而不必辣椒我与valueUpdate绑定代码或使用按钮绕过这个问题.

Answer 1

该draggable插件捕获鼠标以提供其功能.所以当你点击你span的插件处理点击事件时,你就没有得到通知.

它在你使用a时有效,button因为按钮被排除在可拖动插件的效果之外.

因此,您需要使用取消选项span从draggable插件中排除您的插图,例如在标记类的帮助下:

$("#draggable").draggable({cancel: "input,textarea,button,select,option,.save"});

演示JSFiddle.