Question

我想创建一个可编辑的表，这样如果最后一行的所有单元格都有内容，则会自动添加一个新行。对于新行中的单元格，应绑定相同的事件处理程序。这是我的代码，这里有什么问题？

$(document).ready(function(){
    $("td").keyup(function(){keyupper($(this))});
});




function keyupper(cell){

// mark all changed cells by yellow
$(cell).css("background-color","rgb(255,255,150)");

 /* if all cells in last row are filled, add new row
    */
$("tbody tr:last-child").each(function (){

        //$this is the last row
    var td0 = $(this).children().eq(0).text();
    var td1 = $(this).children().eq(1).text();
    var td2 = $(this).children().eq(2).text();
    var td3 = $(this).children().eq(3).text();
    var td4 = $(this).children().eq(4).text();


        //if all fields are filled

    if(td0!="" && td1!="" && td2!="" && td3!="" && td4!=""){
        //parent of this is tbody
        $(this).parent().append("<tr><td contenteditable></td>"
            +"<td contenteditable></td>"
            +"<td contenteditable></td>"
            +"<td contenteditable></td>"
            +"<td contenteditable></td></tr>");
        $(addedcells) = $(this).parent().children().last().children();
        /// list of the cells added in the last row
        /// binding the event handler function via recursion
        $(addedcells).eq(0).bind("keyup",function(){
            keyupper($(addedcells).eq(0));});
        $(addedcells).eq(1).bind("keyup",function(){
            keyupper($(addedcells).eq(1));});
        $(addedcells).eq(2).bind("keyup",function(){
            keyupper($(addedcells).eq(2));});
        $(addedcells).eq(3).bind("keyup",function(){
            keyupper($(addedcells).eq(3));});
        $(addedcells).eq(4).bind("keyup",function(){
            keyupper($(addedcells).eq(4));});

    }

});
}

Answer 1

您是否尝试在＆＃34; keyupper＆＃34;的末尾添加以下语句？功能

$("td").keyup(function(){keyupper($(this))});

Answer 2

我尝试了jQuery on（）函数，它解决了这个问题。它允许为尚未创建的元素分配事件处理程序。

例如

$("tbody").on("keyup","td",function(){
    keyupper($(this))
});

通过递归将事件处理程序绑定到动态创建的元素

2 个答案: