Cannot bind values ​​after inserting table rows with jquery

Question

I have this in my html:

<table class="dataTable" id="CADataTable"> <thead> <tr> <th> Type</th> <th> Name</th> <th> Adress</th> <th> ID Number</th> <th> Contact</th> <th> Note</th> </tr> </thead> <tbody> <tr> <td> <select name="CAType" id="CAType" data-bind="value: CAType" style="width: 12em;"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> <!-- <td><input type="text" name="CAType" data-bind="value: CAType" style="width: 9em;"></td> --> <td><input type="text" name="CAName" data-bind="value: CAName" style="width: 15em;"></td> <td><input type="text" name="CAAdress" data-bind="value: CAAdress" style="width: 15em;"></td> <td><input type="text" name="CAIdNum" data-bind="value: CAIdNum" style="width: 6em;"></td> <td><input type="text" name="CAContact" data-bind="value: CAContact" style="width: 10em;"></td> <td><input type="text" name="CANote" data-bind="value: CANote" style="width: 15em;"></td> </tr> </tbody> </table> <button type="button" id="export" class="button" data-bind="click: newCreditRows">Add new row</button> 

and jquery code inside the jock-out view model, the witch executes when the button is clicked:

 var clickAdd = 0; newCreditRows = function(){ clickAdd++; if(clickAdd<=9){ $('#CADataTable tr:last').after('<tr><td><select name="CAType' +clickAdd+ '" id="CAType' +clickAdd+ '" data-bind="value: CAType' +clickAdd+ '" style="width: 12em;"><option></option> <option></option> <option>3 </option> <option> /  </option> </select></td><td><input type="text" name="CAName' +clickAdd+ '" data-bind="value: CAName' +clickAdd+ '" style="width: 15em;"></td><td><input type="text" name="CAAdress' +clickAdd+ '" data-bind="value: CAAdress' +clickAdd+ ' " style="width: 15em;"></td><td><input type="text" name="CAIdNum' +clickAdd+ ' " data-bind="value: CAIdNum' +clickAdd+ '" style="width: 6em;"></td><td><input type="text" name="CAContact' +clickAdd+ '" data-bind="value: CAContact' +clickAdd+ ' "style="width: 10em;"></td><td><input type="text" name="CANote' +clickAdd+ '" data-bind="value: CANote' +clickAdd+ '" style="width: 15em;"></td></tr>'); }else alert("Maximum number reached!"); }; 

Everything works fine, but I noticed that new lines added by jquery code cannot bind the value to ko.observable() variables ko.observable() everything is correctly specified in my viewmodel, I do not send it because the code will become huge.)

I mean, the observed witch CAAdress1 declared as follows in my code: '" data-bind="value: CAAdress' +clickAdd does not work.

I am sure that I am missing something really small, like char escaping, but I'm still too new to jquery and knockout, so I cannot notice it.

Answer 1

You enter html in dom after calling the applyBindings method. Therefore, Ko is not aware of the new elements.

Take a look at this fiddle

 var CA = function() { this.CAName = null; this.CAAdress= null; this.CAIdNum = null; this.CAContact = null; this.CAName = null; this.CANote= null; this.CAType = null; }; var vm = { newCreditRows : function () { this.creditRows.push(new CA()); }, creditRows : ko.observableArray() }; ko.applyBindings(vm); 

Hope this helps.