Chrome扩展程序：jQuery触发“ keyup”不会更新“ input”值-网站使用了剔除JS

Question

I am writing an chrome extension on top of a website that I figured runs 'knockout JS'.

Consider the following HTML element:

<input type="text" class="form-control text-right" id="amount" autocomplete="off" data-bind="value: amount, valueUpdate: 'keyup'">

I am trying to write a bot that fills this field with a particular value. I have included JQuery as a dependency in the extension.

I tried the following using the Jquery code. The objective is to update the value of the element to say 200.

$('#amount').val("200");
$('#amount').trigger("keypress");
$('#amount').trigger("keyup");

The code seems to update the value of the input visually, but the dependent knockout JS functions do not get triggered. I have not used Knockout JS before.

How do I trigger the knockout JS events ?

Answer 1

Update I hadn't paid attention that you were running a bot on the page. You should be able to get Knockout to recognize the change by

$('#amount').val("200");
$('#amount').trigger('change');

 vm = { amount: ko.observable(100) }; ko.applyBindings(vm); vm.amount.subscribe(function(newValue) { alert("Changed"); }); setTimeout(function() { $('#amount').val(200); $('#amount').change(); }, 800); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <input id="amount" data-bind="value: amount" /> 

Original reply for anybody who might be writing Knockout

You should probably go through the Knockout tutorial .

If you're going to use Knockout, you will not be interacting directly with the DOM, as jQuery does. Instead, you will manipulate variables in the viewmodel (generally speaking, the viewmodel is all the JavaScript code you write that is not attached to Knockout's ko object). In this case, the input's value is bound to the amount variable. To change what's in the input, set the contents of the variable:

amount(200);

(Knockout uses "observable" variables, which are setter-getter functions, rather than simple values).

Answer 2

You can use below code to fulfill your requirement.

<input type="text" class="form-control text-right" id="amount" autocomplete="off" data-bind="value: amount , valueUpdate: 'keyup'">

<p><span data-bind="text:amount"></span></p>
<script src="knockout-3.4.0.js"></script>

<script> 
    var obj = {amount:ko.observable('200')}
    ko.applyBindings(obj);
</script>