Elements inside a button don't get updated when observable changes

[rkennedy]

When there's markup (such as a span) inside a button, and the markup's text is bound to an observable, changes to the observable are not reflected in the appearance of the button.

<input type="edit" data-bind="value: caption, valueUpdate: 'afterkeydown'"/>
<button data-bind="button: {}">
  <span data-bind="text: caption"></span>
</button>

var Model = {
    caption: ko.observable('caption'),
};
ko.applyBindings(Model);

When the edit box changes, the button's caption should change accordingly. Instead, the button continues to display whatever the initial value of Model.caption is set to.

Demonstration here: http://jsfiddle.net/rkennedy/YFcE7/

[gvas]

The jQuery UI button widget replaces the child nodes of the element it is applied on (in its _resetButton() method). The caption won't update because the original bound element is no longer there. I'll close this issue because I think that fighting against jQuery UI's implementation details would inflate the library and it would be an uphill battle anyway. I suggest to use the label option as you demonstrated in your jsfiddle.