Why does jQuery UI draggable interfere with jock data binding?

Question

I would like to understand why creating a containing div in jQuery UI being dragged in the following code changes the Jockout JS data binding behavior.

In the first div (which is being dragged), making changes to the text in the input field and immediately clicking the "Save" button does not reflect the change in the observed. In the second div (which is not draggable), the change is reflected in the 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> 

With the following Javascript:

 VM = { detail: ko.observable('Cat'), saveEdit: function(){ alert(this.detail()); } }; $(document).ready(function() { $("#draggable").draggable(); ko.applyBindings(VM); }); 

You can see the code in action in this jsFiddle: http://jsfiddle.net/NLzg2/

If you change the text in the drag-and-drop input field to Cath and click "Save," "Cat" appears in the warning. However, if you do the same in a fixed input field, the warning displays "Cath". Thus, in the second case, Knockout detected a change in value, and in the first case, it is not.

I know that I can achieve the desired effect using the Knockout valueUpdate binding to make it update the associated observable after each key press. For instance:

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

I also know that if I change <span> to <button> I get the behavior that I expected.

What I would like to understand is why this is happening and how I can achieve the effect I want (i.e. draggable and have a normal Knockout value for the elements inside it) without having to cut my code using valueUpdate bindings or use the button to get around the problem.

Answer 1

The draggable plugin captures the mouse to provide its functionality. Thus, when clicking on the span plugin processes the click event, and the knockout does not receive notifications.

It works when you use button because the buttons are excluded from the drag & drop plugin effect.

So, you need to exclude your span from the draggable plugin using the undo option , for example, using the class marker:

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

JSFiddle demo.