2016-05-15 25 views
0

オートコンプリートは最初のテキストボックスでは機能しますが、ボタンで追加できる問題はありません。ここに私のコードは次のとおりです。複数のテキスト入力でjQueryオートコンプリートが機能しない

HTML:

<input class="button" type="button" value="+" onclick="addRow('positionen')" /> 
<input class="button" type="button" value="-" onclick="deleteRow('positionen')" /> 
<table id="positionen"> 
    <tr> 
     <td><input type="checkbox" name="chk[]" /></td> 
     <td><input class="ui-widget" type="text" name="text[]" placeholder = "Text" /></td> 
     <td><input type="text" name = "val[]" placeholder = "Val" /></td> 
    </tr> 
</table> 

機能のAddRow:

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 
    for(var i=0; i<colCount; i++) { 
     var newcell = row.insertCell(i); 
     newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     switch(newcell.childNodes[0].type) { 
      case "text": 
        newcell.childNodes[0].value = ""; 
        break; 
      case "checkbox": 
        newcell.childNodes[0].checked = false; 
        break; 
     } 
    } 
} 

機能のdeleteRow:

function deleteRow(tableID) { 
    try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       if(rowCount <= 1) { 
        alert("Can't delete all rows"); 
        break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 
     } 
    } catch(e) { 
     alert(e); 
    } 
} 

オートコンプリートコード:

$(function() { 
    $(".ui-widget").focusin(function(){ 
     $(this).autocomplete({ 
      source: 'search.php' 
     }); 
    }); 
}); 

デフォルトでページに既に表示されている最初のテキストボックスは、オートコンプリートで正常に動作しています。しかし、ボタン付きのテキストボックスを追加すると、このテキストボックスのオートコンプリートは機能しません。ページがロードされたときに

答えて

0

イベントがHTMLにバインドされ、新しい行は、あなたが単にあなたのAddRow機能

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 
    for(var i=0; i<colCount; i++) { 
     var newcell = row.insertCell(i); 
     newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     switch(newcell.childNodes[0].type) { 
      case "text": 
        if (newcell.childNodes[0].className === 'ui-widget ui-autocomplete-input') { 
         $(newcell.childNodes).autocomplete({ 
          source: 'search.php' 
         }); 
        } 
        newcell.childNodes[0].value = ""; 
        break; 
      case "checkbox": 
        newcell.childNodes[0].checked = false; 
        break; 
     } 
    } 
} 
+0

「row.autocomplete」にこれを追加することによって作成された行にバインドする必要があり、そこではありません私のために働いていません。しかし、 "$(" .ui-widget ")。オートコンプリート({ \t \t \t出典: 'search.php' \t});それはうまくいっている! – thotho

+0

私の間違い:)、私は行を$()の中に入れることを忘れてしまった。あなたが "$(" .ui-widget ")。オートコンプリート({source: 'search.php'});"あなたは既存の行にイベントをバインドしています - オートコンプリートイベントは間違って編集された何回か呼び出されます – homer

+0

悲しいことに、これはどちらもうまくいきません... – thotho

関連する問題