# Two-way binding and jquery changes problem

**URL:** <https://forums.bitovi.com/t/two-way-binding-and-jquery-changes-problem/475>\
**Category:** CanJS\
**Created:** [November 23, 2016, 12:32pm UTC](https://forums.bitovi.com/t/two-way-binding-and-jquery-changes-problem/475 "2016-11-23T12:32:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fp\_dev](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@fp\_dev](https://forums.bitovi.com/u/fp_dev)\
**Post date:** [November 23, 2016, 12:32pm UTC](https://forums.bitovi.com/t/two-way-binding-and-jquery-changes-problem/475/1 "2016-11-23T12:32:49Z")

</div>

Hi,

Aftert setting up a two-way binding with a template element and a map, I tried to change the value with jquery but the binding doesn’t work.  
Do I miss something?

Here is an example where I set the binding for a `<input>` and a `<p>` element. if I change the `<input>` value using jquery it will not change the `<p>`.

[JSBIN EXAMPLE](http://jsbin.com/xomorunodo/1/edit?html,js,output)

Thank you.

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [November 23, 2016, 4:50pm UTC](https://forums.bitovi.com/t/two-way-binding-and-jquery-changes-problem/475/2 "2016-11-23T16:50:36Z")

</div>

Hi @fp_dev,

You’ll need to trigger a change event after using jQuery to change the value, like this:

```auto
$("#myIn").trigger("change");

```

Here’s a JSBin with that fix: [http://jsbin.com/dohuwusomo/1/edit?html,js,output](http://jsbin.com/dohuwusomo/1/edit?html,js,output)

Out of curiosity, is there a reason you’re using jQuery to change the value instead of updating the value on the `can.Map`?

Best,  
Chasen

---

<div class="post-metadata">

**Author:** ![fp\_dev](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@fp\_dev](https://forums.bitovi.com/u/fp_dev)\
**Post date:** [November 23, 2016, 7:07pm UTC](https://forums.bitovi.com/t/two-way-binding-and-jquery-changes-problem/475/3 "2016-11-23T19:07:04Z")

</div>

Thank you @chasen,

The reason is the following: in situations where I have to include third parties libraries that process data asyncronously and that are configured to call a global function (callback) when they end, I don’t find another way to bind a Map attribute or a Component viewModel to the result of the computation.

My approach is to bind a custom attribute to the element and change it programmatically using the callback to track the result event of the external conputation.

An example could be **googlemaps** API when using the `async defered` mode:

```
<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
 </script>

```

when the callback method is called when the API js is fully loaded.

In general, I use the scope writing a proper parent/child structure with the Components view (and viewModel) but in this case I cannot find other ways.

Are there other possible solutions?

Thank you!

---

<div class="post-metadata">

**Author:** ![fp\_dev](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@fp\_dev](https://forums.bitovi.com/u/fp_dev)\
**Post date:** [November 24, 2016, 7:13am UTC](https://forums.bitovi.com/t/two-way-binding-and-jquery-changes-problem/475/4 "2016-11-24T07:13:23Z")

</div>

Also creating a Map in the `window` object (globally) and updating it will work, even better: i can observe it from different components without using jQuery.  
Thank you a lot @chasen for the suggestion: i don’t know why did not I think of that before.