javascript - Maximum call stack size exceeded while binding jqGrid row buttons to Knockout JS -

i have jqgrid, edit , delete buttons in each row, loads data on button click. these (edit & del) buttons bind knockout viewmodel. working fine except when button, loads jqgrid clicked second time, data doesn't load , get:

maximum call stack size

the model:

function policymodel() { var self = this; self.iid = ko.observable(); //other properties... } 

its viewmodel:

function policyviewmodel () {    var self = this;    self.model = new policymodel();    self.getpolicies = function () {      $.jgrid.gridunload("#tblpolicies"); //if user clicks view button more once, should unloaded first     getpolicies();   }    self.getpolicy = function() {      //i want details of row using ajax call , update model here     alert('get: ' + rowid);    }    self.updatepolicy = function () {      var strpolicy = ko.tojson(self.model);     alert(strpolicy); //send updated record server using ajax call   }    self.deletepolicy = function (rowid) {     alert("delete: " + rowid); //delete clicked row using ajax call   }    //some subscribe functions of observables below this... } 

populating jqgrid:

function getpolicies() {  $("#tblpolicies").jqgrid({      url: apiurl,     datatype: "json",     loadonce: true,     colmodel: [         //column models data here....          //this i'm generating row buttons , binging them knockout model         {             label: 'del', name: 'delete',             formatter: function (cellvalue, options, rowobject) {                  return '<span class="fa fa-trash"  data-bind="click: deletepolicy.bind($data, ' + options.rowid + ')"></span>'             },         },         {             label: 'edit', name: 'edit',             formatter: function (cellvalue, options, rowobject) {                  return '<span class="fa fa-pencil" data-bind="click: getpolicy.bind($data, ' + options.rowid + ')"></span>'             }         },     ],     rownum: 10,     rowlist: [10, 20, 50, 100],     loadonce: true,     pager: "#dvpoliciespager",     loadcomplete: function () {         /*        jqgrid generated after binding of knockout, i'm binding container table in 'loadcomplete' event.        avoid rebinding, i'm removing bindings first using 'cleannode'.        */        ko.cleannode(document.getelementbyid("tblpolicies"));        ko.applybindings(policyviewmodel(), document.getelementbyid("tblpolicies"));     },  }); } 

initializing in document.ready:

$(function () {    ko.applybindings(new policyviewmodel()); }); 

and html:

<input type="button" id="btnupdatepolicy" data-bind="click: updatepolicy" value="update policy"/>  <input type="button" id="btnviewpolicies" data-bind="click: getpolicies" value="view policies"/>  <div id="dvpoliciescontainer">   <table id="tblpolicies"></table> </div> 

i tried: this, this , this couldn't help.

i guess calling same function in loop:

  self.getpolicies = function () {      $.jgrid.gridunload("#tblpolicies"); //if user clicks view button more once,     window.getpolicies(); // <---------this 1 here   } 

i think want refer jqgrid creator function defined globally.