knockout data-binding not working as expected with jquery

Question

I have an element that is data bound like this:

<input data-bind="value: observableCity" class="form-control" id="cityInput" type="text">

And another element like this:

<span class="" data-bind="text: observableCity"></span>

and some js that does this on an ajax call

$('#input1').val(data.City);

When I enter text into the <input> it is updated in the <span> as well, however, when i insert a value to the <input> using jquery it does not update in the <span> as well. Is there a way to fix this that I missed?

Answer 1

You don't have to set the input's value via jQuery since such value will not be assigned to your observable variable, that's why your span doesn't reflect the input's value you just entered.

The observable's values are set by calling them as follows: observableCity(data.City)