Javascript / Ajax -动态添加行的onchange事件



我有一个HTML表,我可以使用javascript添加一个新行到该表。我想调用javascript (Ajax)函数,使用onchange事件对表上的每个单元格。'

<script type="text/javascript" src="nextTest.js"></script>
    <SCRIPT language="javascript">
            function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = rowCount + 1;
            var cell2 = row.insertCell(1);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox[]";
        element2.onchange = nexttest();
            cell2.appendChild(element2);
    }
    </SCRIPT>
</HEAD>
<body>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD> 1 </TD>
        <TD> <INPUT type="text" /> </TD>
    </TR>
</TABLE>
</body>
</html>`

当我按下按钮时,将添加新行并触发onchange事件。我想做的是当有人将数据输入到这些新单元格时,我想要onchange事件触发。该事件被称为"nextTest",并存储在一个外部文件中。

当我插入新行时,事件触发,但如果我更新其中一个单元格,什么也不会发生。我做错了什么?

Thanks in advance

必须赋值一个函数,而不是一个函数调用(除非被调用的函数返回另一个函数)。

省略括号:

element2.onchange = nexttest;
    function nexttest(evt){
        alert(evt.target.value);
    }
    function addRow (tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        cell1.innerHTML = rowCount + 1;
        var cell2 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txtbox[]";
        element2.onchange = nexttest; // give a valid function identifier here .
        cell2.appendChild(element2);
    }
http://jsbin.com/iropam/2/edit