jquery - knockout is not working under document.ready -

i working on knockout , having issues. below .js code , ko.applybindings(viewmodel); way down under document.ready , not working @ all. works when add

ko.applybindings(viewmodel); 

in side method $('#dttable tbody').on('click', 'tr', function (). please suggest issue if place code inside data table row click, once click on 2nd time other row or same row error comes "we can not define binding multiple times". please tell me issue in code , 2nd should put apply bindings

/// <reference path="knockout-3.1.0.debug.js" />  $(document).ready(function () {           var viewmodel = new function () {         this.firstname = ko.observable();         this.lastname = ko.observable();      };       $('#dtable').datatable({             "scrolly": 300,             "scrollcollapse": true,             "jqueryui": true              });         var selectedrow;      $('#dtable tbody').on('click', 'tr', function () {         $(this).toggleclass('selected');         selectedrow = $(this).closest('tr');          viewmodel.firstname = selectedrow.context.cells(0).innerhtml;         viewmodel.lastname = selectedrow.context.cells(1).innerhtml;              });         $('#btnsavechanges').click(function () {                var saverequest = new object();          saverequest.firstname = viewmodel.firstname;         saverequest.lastname = viewmodel.lastname;            $.ajax({             async: true,             type: 'post',             url: '/person/getperson',             data: json.stringify(saverequest),             contenttype: "application/json; charset=utf-8",             datatype: 'json',             success: function (result) {                 if (result == true) {                      alert("division saved successfully!");                      if ($("#clickedbutton").val() == "add") {                         addnewrowtodatatable(saverequest);                     }                     else {                         updaterowtodatatable();                     }                  }                 else {                     alert("did not save!");                 }             }         });       });      var t = $('#dtable').datatable();      $('#btnadd').on('click', function () {          $("#clickedbutton").val("add");          viewmodel.firstname = "";         viewmodel.lastname = "";      });      function addnewrowtodatatable(saverequest) {         t.row.add([            saverequest.firstname,            saverequest.lastname,          ]).draw();     }      function updaterowtodatatable() {         selectedrow.context.cells(0).innerhtml = viewmodel.firstname;          selectedrow.context.cells(1).innerhtml = viewmodel.lastname;       }     ko.applybindings(viewmodel);  }); 

thanks , waiting reply

viewmodel.firstname , viewmodel.lastnames observables. assign values them this...

viewmodel.firstname(selectedrow.context.cells(0).innerhtml); viewmodel.lastname(selectedrow.context.cells(1).innerhtml);  

when use assignment statement, you're overwriting observable else. view still binding observables first time ko.applybindings() run, that's why value doesn't change until reapply bindings again (which should not have do).

once assignments fixed, there problem code...

saverequest.firstname = viewmodel.firstname; saverequest.lastname = viewmodel.lastname;  

if firstname , lastname observables, need access values invoking them...

saverequest.firstname = viewmodel.firstname(); saverequest.lastname = viewmodel.lastname();