Javascript jQuery无限输入表单

希望我的最后一个问题能持续一段时间，虽然我不能确定

我试图生成一个表单，一旦输入数据，它就会创建一个新的数据输入区域。这似乎是一个非常小的问题，我可以想到这种表单的几种可能用途（在应用程序中输入工作历史记录，输入可以联系到你的电话号码列表，等等）

一旦输入数据，就可以很容易地创建一个新行，但是我找不到一种方法来告诉这一新行，当数据输入到It时，它应该创建另一行

为了简单起见，为了帮助获得我想要的外观，我在表单中使用了一个表，每次在最后一行中键入任何内容时，都会创建一个新行。以下是我正在使用的HTML：

<table>

    <tr>
        <th>Field 1</th>
        <th>Field 2</th>
        <th>Field 3</th>
    </tr>

    <tr>
        <input type="hidden" name="id-row-0" value="0" />
        <td><input type="text" name="field1-row-0" value="" /></td>
        <td><input type="text" name="field2-row-0" value="" class="date-field" /></td>
        <td><input type="text" name="field3-row-0" value="" /></td>
    </tr>

</table>

如您所见，我不知道如何递归地将此函数设置为

.change（）

的回调。我试着做了如下的事情：

function add_new_row = function() {
    ...
    // Recursively set this function for change()?
    new_row.find('input,textarea,select').change( add_new_row );
    ...
}

$($.spreadsheet.fields).find('input,textarea,select').change( add_new_row );

但它不起作用。javascript不支持任何形式的递归吗？如果没有，如何解决这一困境

在@J0HN的建议下使用

.delegate（）

之后，下面是我当前的javascript文件的全部内容：

$(document).ready( function() {

$.spreadsheet = {
    fields  : $('#myForm').find('input,textarea,select'),   // list of input HTML elements
    rows    : $('#myForm').find('tr').length - 1,           // number of rows currently. Subtract 1 for table headers
    columns : $('#myForm').find('tr')[0].cells.length,      // number of fields pulled from the database
}

// Add new rows

$("#myForm").delegate("input, textarea, select", "change", function() {

    var index = $.spreadsheet.fields.index( $( this ) );
    var row = Math.floor(index / $.spreadsheet.columns);
    var col = index % $.spreadsheet.columns;

    if( row == $.spreadsheet.rows - 1 ) {

        // Last row was changed. Do we add a new row?

        if( $(this).val() != '' ) {

            // A value was added. We ned a new row
            // This row should look just like the previous... A CLONE, one might say?

            new_row = $("input[name=id-row-"+row+"]").parent().clone().appendTo("#myForm table");

            // Now we need to change the name of every element in this row to reflect the new row number

            new_row.find('input, textarea, select').each( function() {

                partial_name = this.name.substring(0, this.name.indexOf('-row-'+row));
                this.name = partial_name + '-row-' + (row+1);

                // We can't initialize a datepicker if it thinks one is already initialized

                $(this).removeClass('hasDatepicker');
                this.id = '';

            });

            // Create date pickers

            new_row.find('.date-field').datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true });

            // Update the total number of rows

            $.spreadsheet.rows += 1;

        }

    }

});

// Create date pickers

$( ".date-field" ).datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true });

});

当我在第一行中键入一些数据时，它成功地添加了一个新行，正如预期的那样。使用Chrome的“Inspect Element”功能，我可以检查这些新元素上的行号，它们看起来都是正确的，日期选择器甚至可以正常工作

但是，当我在新行中键入数据时，什么也没有发生。没有添加行，没有错误，javascript不会崩溃（日期选择器继续工作）。。。就好像从未调用过“change”方法

想法？

我认为应该这样做。它现在或将来将事件处理程序“绑定”到任何适合选择器的元素

$("#myform").delegate("input, textarea, select", "change", function(){
     //place row adding logic here
});

我想我们应该做这个把戏。它现在或将来将事件处理程序“绑定”到任何适合选择器的元素

$("#myform").delegate("input, textarea, select", "change", function(){
     //place row adding logic here
});

---

请写下这个函数“add_new_row”，而不必看一大堆代码，如果我理解正确，一个可能的解决方案是使用事件委派。将事件处理程序绑定到祖先并侦听输入字段的更改事件。如果触发更改的字段是最后一个字段（或包含在最后一行），请追加一个新字段（行）。@cvsguimaraes，

add\u new\u row

是先前传递给

$（$.spreadsheet.fields.）的函数的精确副本。find（'input，textarea，select'）.change（）

。我认为从上下文和重复使用上面的注释来看，这一点是显而易见的。请写下这个函数“add_new_row”，而不必看一大堆代码，如果我理解正确，一个可能的解决方案是使用事件委派。将事件处理程序绑定到祖先并侦听输入字段的更改事件。如果触发更改的字段是最后一个字段（或包含在最后一行），请追加一个新字段（行）。@cvsguimaraes，

add\u new\u row

是先前传递给

$（$.spreadsheet.fields.）的函数的精确副本。find（'input，textarea，select'）.change（）

。我认为从上下文和重复使用上面的注释来看，这一点是显而易见的。还可以看看live（）函数，它也有同样的功能。据我所知，

live

的性能较差，不允许停止事件的传播，并有一些其他的回拖。所以，改用

delegate

。这个解决方案听起来很完美，但我只是尝试了一下，它对我不起作用。也许我的语法有问题？我现在得去上课了，但我今天晚些时候会用当前的jQuery更新我的问题，看看是否有人能找出它不起作用的原因。别忘了解释一下

不起作用的意思。错误、故障等？@J0HN:我已经解决了这个问题<代码>$（“#myForm”）.delegate（）

正是我所需要的，但是在添加新行后，我还需要重新计算

$.spreaghseet.fields

的值。我刚刚添加了

$。spreadsheet.fields=$（'#myForm'）。添加行后查找（'input，textarea，select'）

。还可以查看执行相同操作的live（）函数。据我所知，

live

的性能较差，不允许停止事件传播，并有其他一些回拖。所以，改用

delegate

。这个解决方案听起来很完美，但我只是尝试了一下，它对我不起作用。也许我的语法有问题？我现在得去上课了，但我今天晚些时候会用当前的jQuery更新我的问题，看看是否有人能找出它不起作用的原因。别忘了解释一下

不起作用的意思。错误、故障等？@J0HN:我已经解决了这个问题<代码>$（“#myForm”）.delegate（）

正是我所需要的，但是在添加新行后，我还需要重新计算

$.spreaghseet.fields

的值。我刚刚添加了

$。spreadsheet.fields=$（“#myForm”）。添加行后查找（'input，textarea，select'）

。