追加使用jQuery新行和输入标签 [英] append new rows and input tags using jQuery

问题描述

我已经设置使用太多Enter键来浏览其输入字段的Web应用程序。另外，我在我的形式的追加新行到包含我的输入字段的表的控制。

I have a web application that has set to navigate its input fields using Enter key too. In addition, I have a control in my forms that appends new rows to a table that contains my input fields.

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

这是我使用含追加输入字段新行。

And this what I used for appending new rows containing input fields.

$('#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行。每当我preSS输入，光标改变其从目前的场到下一个位置。但是，当我追加新行并将其输入领域，任何事情都不会从第6行发生。甚至，它不能获取关键code的输入使用我的previous code。

Imagine that I have 5 rows at the first time. Whenever I press Enter, the cursor changes its position from the current field to the next one. But when I append new rows and their input fields, anything will not happen from the 6th row. Even, it can not fetch the key code for the Enter using my previous code.

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

这是怎么回事？

推荐答案

如果你是在jQuery的1.7+然后用在或委托来代替。它比老方法更有效。在这里，我监测的表格单元格单击事件表。当事件发生时我加入点击！表格单元格。这既适用于初始表单元格并添加的。

If you are in jQuery 1.7+ then use on or delegate instead. It is more efficient than old methods. Here I monitor the table for click events on table cells. When an event occurs I add clicked! to the table cell. This works for both the initial table cells and added ones.

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

这篇关于追加使用jQuery新行和输入标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！