無法插入表中的行與jquery

我有這在我的html後結合值：無法插入表中的行與jquery

<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>

和敲除JS視圖模型的內部的jQuery代碼中，當該按鈕被按下執行女巫：

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!"); 
          };

一切工作正常，但我注意到，由jquery代碼添加的新行不能將值綁定到ko.observable()變量（我有一切在我的viewmodel中正確聲明，我沒有發佈它因爲代碼會變得很大。）

我的意思是可觀察的CAAdress1女巫在我的代碼中聲明如下：'" data-bind="value: CAAdress' +clickAdd不起作用。我確定我錯過了像char轉義那樣真的很小的東西，但我在jquery和knockout中仍然太新，所以我不能發現它。

來源

2013-07-11 Slim

聽起來就像你需要用jquery'delegate'或'on'事件 – coolguy

處理程序在初始化時綁定。後續添加不會綁定處理程序，因爲在初始代碼運行時它們不存在。對於jQuery，您可以通過從保證存在的DOM樹中較高的元素上委託處理程序來解決此問題。我不知道Knockout是如何運作的。 – 2013-07-11 07:58:54

你能否提出更多描述性標題？「奇怪的，但簡單的jQuery問題」對於未來尋找類似問題的人來說是沒有的。 – 0lukasz0

您在調用applyBindings方法後將html注入到dom中。因此，Ko並沒有意識到新元素。

看看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);

我希望它能幫助。

來源

2013-07-11 08:11:03 Damien

謝謝你這麼mut！這正是我正在尋找的！你搖滾！ – Slim

無法插入表中的行與jquery

回答

相關問題