使用jQuery追加新行和輸入標籤

我有一個Web應用程序已設置爲使用Enter鍵導航其輸入字段。另外，我在表單中添加了一個控件，它將新行添加到包含我的輸入字段的表中。使用jQuery追加新行和輸入標籤

<select name="more" id="more" style="width:50px"> 
    <option value="0">0</option> 
    <option value="5">5</option> 
    <option value="10">10</option> 
    <option value="20">20</option> 
</select>

這是我用來追加包含輸入字段的新行的。

$('#more').change(function(e) { 
    var current_rows = ($('#myTable tr').length)-1; 
    current_rows = parseInt(current_rows); 
    var more = $('#more').val(); 
    more = parseInt(more); 
    if (more != '0') { 
     for (i = current_rows+1 ; i <= current_rows+more ; i++) { 
      // rows HTML tags here as content 
      $('#myTable tr:last').after(content); 
     } 
    } 
    $('#more').val('0'); 
});

想象一下，我第一次有5行。每當我按下Enter鍵，光標就會從當前字段改變到下一個字段。但是當我添加新行和他們的輸入字段時，第6行不會發生任何事情。即使如此，它也無法使用我以前的代碼獲取Enter的關鍵代碼。

if (event.keyCode == 13) { 
// do something 
}

這是怎麼回事？

來源

2011-12-17 Mohammad Saberi

你能發佈更多的代碼嗎？ – Aaron 2011-12-17 06:44:03

如果你在jQuery 1.7+然後使用on或delegate來代替。它比舊的方法更有效率。在這裏我監視表格單元格上的單擊事件。當發生事件時，我將clicked!添加到表格單元格中。這適用於初始表格單元格和添加的單元格。

http://jsfiddle.net/WBxQz/1/

$('#more').change(function(e) { 
    for (var i = 0; i < $(this).val(); i++) { 
     $('#myTable').append('<tr><td></td></tr>'); 
    } 
}); 

$('table').on('click', 'td', function() { 
    $(this).html('clicked!'); 
});

來源

2011-12-17 07:15:56 mrtsherman

我覺得是因爲你動態加載其他行到您DOM。也許jQuery的的「活」的方法可以幫助你

$("#myTable tr").live("keypress",function (e){ 

if(e.keyCode == 13) 
    //Do somthing 

});

，如果這個解決方案沒有奏效，評論我來編輯它

祝你好運，阿里

來源

2011-12-17 07:02:39

由於jQuery 1.7「live」已被棄用。它也不推薦用於jQuery 1.4.2或更高版本。你應該使用`委託`代替。 – mrtsherman 2011-12-17 07:05:05

最後，我可以用阿里的和mrtsherman的建議解決我的問題。

$("#myTable").delegate("input","keypress",function(e) { 
    // do something 
})

謝謝阿里和Mrtsherman。

來源

2011-12-17 18:05:38

使用jQuery追加新行和輸入標籤

回答

相關問題