Not able to trigger Knockout data-bind using jQuery

Question

I am writing a plugin using jQuery and knockout. I have two radio buttons. I am using knockout data-bind to check and uncheck the radio button. The problem is that when I am trying to uncheck the radio button on click of another button using jQuery, it is not updating bind observable property .

<input  type="radio" data-bind="checked: selectedVal" name="1" value="fixedPrice"/>  Fixed Price
 <input class="hn" type="radio" data-bind="checked: selectedVal" name="1" value="allowBiding"/> Allow Biding
<pre data-bind="text:ko.toJSON($data,null,2)"></pre>
<input type="button" id="button" value="Click Me" />

 var onClick = function() {
   $('.hn').prop('checked', true);

};

$('#button').click(onClick);

var ViewModel = function () {
    var self = this;
    self.selectedVal = ko.observable("fixedPrice");
    self.selectedVal.subscribe(function (val) {
       console.log(val)
    });
};

ko.applyBindings(new ViewModel());

Please find this jsfiddle below with more details.

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

Welp! Don't mix KO and jQuery in this way. You're fighting Knockout, not using it. See this earlier answer I wrote for a very similar situation and extended explanation.

Note that this is certainly not a bug, jQuery will by default not trigger events on DOM changes like that. If you insist on mixing KO and jQuery this way, be sure to notify others like this:

ko.applyBindings({
  isChecked: ko.observable(false),  
  onClick: function() {
    $('.hn').prop('checked', true);
    $('.hn').trigger('click');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1. The radio button: <input type="radio" class="hn" data-bind="checked: isChecked">
<br>
2. Trigger it with jQuery: <button data-bind="click: onClick">trigger</button>
<hr>
Debug info:<br><textarea data-bind="text: ko.toJSON($root)"></textarea>

edited May 23 '17 at 12:07

Community

1
1

answered Oct 13 '15 at 19:29

Jeroen

60,696
40
206
339

@Dandy I hope you're only trying it to satisfy curiosity, and not planning to use it. It is an anti-pattern. – Roy J Oct 13 '15 at 19:43
@RoyJ yes i know roy. just out of curiosity. – Dandy Oct 13 '15 at 19:59
Calling `click` on a radio button already changes its value, so you shouldn't change the `checked` value and then call `click`. – Michael Best Oct 16 '15 at 03:29
@MichaelBest I thought you were right, but when I tried to remove that I noticed KO doesn't see the actual change. I've updated my answer. If you change my stack snippet and remove the `prop` call then Knockout will *not* update the view model on `trigger`. – Jeroen Oct 16 '15 at 11:52

score 2 · Answer 2 · answered Oct 13 '15 at 19:38

jQuery and Knockout are fighting over control of the view. If you're going to use a viewmodel, use the viewmodel and do not manipulate the DOM except through the viewmodel. You have a viewmodel element that controls the radio buttons, you just need to set it. Knockout provides a click binding, so you don't need jQuery to attach that, either.

var ViewModel = function () {
    var self = this;
    self.selectedVal = ko.observable("fixedPrice");
    self.selectedVal.subscribe(function (val) {
        console.log(val)
    });
    self.setSelected = function () {
        self.selectedVal('allowBiding');
    };
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="radio" data-bind="checked: selectedVal" name="1" value="fixedPrice" />Fixed Price
<input type="radio" data-bind="checked: selectedVal" name="1" value="allowBiding" />Allow Biding
<pre data-bind="text:ko.toJSON($data,null,2)"></pre>

<input type="button" value="Click Me" data-bind="click:setSelected" />

score 1 · Answer 3 · answered Oct 13 '15 at 18:54

1

It looks like a bug. However, you can try to invoke the native click handler so the observable will be updated.

$('.hn').triggerHandler('click');

Or

$('.hn')[0].click();

Here is a JsFiddle Demo

answered Oct 13 '15 at 18:54

Viktor Bahtev

4,858
2
31
40

It's not a bug. Knockout responds to the event, as you've noticed, and not to manually changing the `checked` property through JavaScript. – Michael Best Oct 16 '15 at 03:28
the '$('.hn')[0].click();' worked perfectly for me. Needed it to run as part of an automated visual regression testing tool that I have set up. Thank you. – Jamie Paterson Jan 09 '17 at 15:24

Not able to trigger Knockout data-bind using jQuery

3 Answers3

Linked