引用动态添加到页面的输入字段

时间：2014-04-10 13:51:58

标签： javascript jquery

在我的项目的一个jsp页面中，我有这个jquery代码，它用服务器（json字符串）的动态数据填充表：

$('document').ready(function(){
    var obj_data = jQuery.parseJSON( '{"Data":[{"data":"2014-04-10","string":"10/MAR"},{"data":"2014-04-11","string":"11/MAR"},{"data":"2014-04-12","string":"12/MAR"},{"data":"2014-04-13","string":"13/MAR"},{"data":"2014-04-14","string":"14/MAR"},{"data":"2014-04-15","string":"15/MAR"},{"data":"2014-04-16","string":"16/MAR"},{"data":"2014-04-17","string":"17/MAR"},{"data":"2014-04-18","string":"18/MAR"},{"data":"2014-04-19","string":"19/MAR"}]}' );
    var obj_hora = jQuery.parseJSON( '{"Hora":[{"hora":"04:30:00","string":"4:30-4:30"},{"hora":"05:00:00","string":"5:0-5:0"},{"hora":"05:30:00","string":"5:30-5:30"},{"hora":"06:00:00","string":"6:0-6:0"},{"hora":"06:30:00","string":"6:30-6:30"},{"hora":"07:00:00","string":"7:0-7:0"},{"hora":"07:30:00","string":"7:30-7:30"},{"hora":"08:00:00","string":"8:0-8:0"},{"hora":"08:30:00","string":"8:30-8:30"},{"hora":"09:00:00","string":"9:0-9:0"},{"hora":"09:30:00","string":"9:30-9:30"},{"hora":"10:00:00","string":"10:0-10:0"}]}' );
    var obj_horario = jQuery.parseJSON( '{"Horario":[{"horario":"2014-04-11 06:00:00","data":"2014-04-11","string_data":"11/MAR","hora":"06:00:00","string_hora":"6:0-6:0"},{"horario":"2014-04-11 06:30:00","data":"2014-04-11","string_data":"11/MAR","hora":"06:30:00","string_hora":"6:30-6:30"},{"horario":"2014-04-11 07:00:00","data":"2014-04-11","string_data":"11/MAR","hora":"07:00:00","string_hora":"7:0-7:0"},{"horario":"2014-04-12 06:00:00","data":"2014-04-12","string_data":"12/MAR","hora":"06:00:00","string_hora":"6:0-6:0"},{"horario":"2014-04-12 06:30:00","data":"2014-04-12","string_data":"12/MAR","hora":"06:30:00","string_hora":"6:30-6:30"},{"horario":"2014-04-12 07:00:00","data":"2014-04-12","string_data":"12/MAR","hora":"07:00:00","string_hora":"7:0-7:0"},{"horario":"2014-04-13 06:00:00","data":"2014-04-13","string_data":"13/MAR","hora":"06:00:00","string_hora":"6:0-6:0"},{"horario":"2014-04-13 06:30:00","data":"2014-04-13","string_data":"13/MAR","hora":"06:30:00","string_hora":"6:30-6:30"},{"horario":"2014-04-13 07:00:00","data":"2014-04-13","string_data":"13/MAR","hora":"07:00:00","string_hora":"7:0-7:0"},{"horario":"2014-04-14 06:00:00","data":"2014-04-14","string_data":"14/MAR","hora":"06:00:00","string_hora":"6:0-6:0"},{"horario":"2014-04-14 06:30:00","data":"2014-04-14","string_data":"14/MAR","hora":"06:30:00","string_hora":"6:30-6:30"},{"horario":"2014-04-14 07:00:00","data":"2014-04-14","string_data":"14/MAR","hora":"07:00:00","string_hora":"7:0-7:0"},{"horario":"2014-04-15 06:00:00","data":"2014-04-15","string_data":"15/MAR","hora":"06:00:00","string_hora":"6:0-6:0"},{"horario":"2014-04-15 06:30:00","data":"2014-04-15","string_data":"15/MAR","hora":"06:30:00","string_hora":"6:30-6:30"},{"horario":"2014-04-15 07:00:00","data":"2014-04-15","string_data":"15/MAR","hora":"07:00:00","string_hora":"7:0-7:0"},{"horario":"2014-04-16 06:00:00","data":"2014-04-16","string_data":"16/MAR","hora":"06:00:00","string_hora":"6:0-6:0"},{"horario":"2014-04-16 06:30:00","data":"2014-04-16","string_data":"16/MAR","hora":"06:30:00","string_hora":"6:30-6:30"},{"horario":"2014-04-16 07:00:00","data":"2014-04-16","string_data":"16/MAR","hora":"07:00:00","string_hora":"7:0-7:0"},{"horario":"2014-04-17 06:00:00","data":"2014-04-17","string_data":"17/MAR","hora":"06:00:00","string_hora":"6:0-6:0"},{"horario":"2014-04-17 06:30:00","data":"2014-04-17","string_data":"17/MAR","hora":"06:30:00","string_hora":"6:30-6:30"},{"horario":"2014-04-17 07:00:00","data":"2014-04-17","string_data":"17/MAR","hora":"07:00:00","string_hora":"7:0-7:0"},{"horario":"2014-04-18 06:00:00","data":"2014-04-18","string_data":"18/MAR","hora":"06:00:00","string_hora":"6:0-6:0"},{"horario":"2014-04-18 06:30:00","data":"2014-04-18","string_data":"18/MAR","hora":"06:30:00","string_hora":"6:30-6:30"},{"horario":"2014-04-18 07:00:00","data":"2014-04-18","string_data":"18/MAR","hora":"07:00:00","string_hora":"7:0-7:0"}]}' );

    var newRow1 = $('<tr>');
    for(var item in obj_hora.Hora) {
        newCol1 = "<td></td>";
        for(var item2 in obj_data.Data) {
            newCol1 += '<td>' + obj_data.Data[item2].string + '</td>';
        }
    }
    newRow1.append(newCol1);
    $("table.horarios").append(newRow1);

    var counter = 1;
    var newRow2 = "";
    for(var item in obj_hora.Hora) {
        newRow2 = $('<tr>');
        newCol2 = '<td>' + obj_hora.Hora[item].string + '</td>';
        for(var item2 in obj_data.Data) {
            newCol2 += '<td>' + '<input type="checkbox" class="horario" data-key_data="'+obj_data.Data[item2].data+'" data-key_hora="'+obj_hora.Hora[item].hora+'" name="'+counter+'">' + '</td>';
            for(var index in obj_horario.Horario) {
                if(obj_hora.Hora[item].hora == obj_horario.Horario[index].hora && obj_data.Data[item2].data == obj_horario.Horario[index].data)
                    $('input[name='+counter+']').attr("checked", "true");
            }
            counter++;
        }
        newRow2.append(newCol2);
        $("table.horarios").append(newRow2);
    }

});

我的问题在于这一行：

for(var index in obj_horario.Horario) {
                if(obj_hora.Hora[item].hora == obj_horario.Horario[index].hora && obj_data.Data[item2].data == obj_horario.Horario[index].data)
                    $('input[name='+counter+']').attr("checked", "true");
            }

该行应该使复选框具有类似的日期和时间值，但是当我运行应用程序并打开此页面时，不会检查任何内容，尽管我在变量＆＃39; obj_horario＆＃39;中有数据，你可以在上面的代码中看到。

有人可以看到我在这里做错了吗？

更新

我将上面的代码突出显示更改为：

        for(var index in obj_horario.Horario) {
            if(obj_hora.Hora[item].hora == obj_horario.Horario[index].hora && obj_data.Data[item2].data == obj_horario.Horario[index].data) {
                console.info('counter='+counter);
                console.info('Hora = ' + obj_hora.Hora[item].hora + '| Horario.hora = ' + obj_horario.Horario[index].hora);
                console.info('Data = ' + obj_data.Data[item2].data + '| Horario.data = ' + obj_horario.Horario[index].data);
                var checkbox = $('input[name='+counter+']');
                $(checkbox).attr("checked", "true");
            }
        }

包含console.info（）函数;现在，我可以在浏览器控制台中看到if语句正确选择了应检查的itens，但我猜这段代码：

                var checkbox = $('input[name='+counter+']');
                $(checkbox).attr("checked", "true");

没有正常工作。我的猜测是因为它引用了一个动态创建的对象 - 我之前遇到过类似的问题，并解决了包含静态对象的动态对象，并将事件绑定到这个静态元素，但现在我可以＆＃39;弄清楚如何做同样的事情，因为我触发任何事件，只是将元素添加到页面。

任何人都可以指出我解决这个问题的方向吗？

1 个答案:

答案 0 :(得分：1)

在这部分：

for(var item in obj_hora.Hora) {
    newRow2 = $('<tr>');
    newCol2 = '<td>' + obj_hora.Hora[item].string + '</td>';
    for(var item2 in obj_data.Data) {
        newCol2 += '<td>' + '<input type="checkbox" class="horario" data-key_data="'+obj_data.Data[item2].data+'" data-key_hora="'+obj_hora.Hora[item].hora+'" name="'+counter+'">' + '</td>';
        for(var index in obj_horario.Horario) {
            if(obj_hora.Hora[item].hora == obj_horario.Horario[index].hora && obj_data.Data[item2].data == obj_horario.Horario[index].data)
                $('input[name='+counter+']').attr("checked", "true");
        }
        counter++;
    }
    newRow2.append(newCol2);
    $("table.horarios").append(newRow2);
}

你没有将newCol2附加到DOM（带有.append（）），直到for循环结束。因此，在for循环中，你的$（'input ['= + counter +']'）被执行，DOM中还没有这样的元素。

可能的解决方案：

（第一个解决方案）在你的.append（）之后添加这个for循环（所以在你粘贴的代码片段之后）：

for(var item in obj_hora.Hora) {
    for(var item2 in obj_data.Data) {
        for(var index in obj_horario.Horario) {
            if(obj_hora.Hora[item].hora == obj_horario.Horario[index].hora && obj_data.Data[item2].data == obj_horario.Horario[index].data)
                $('input[name='+counter+']').attr("checked", "true");
        }
        counter++;
    }
}

（第二个解决方案）用以下内容替换原始代码：

for(var item in obj_hora.Hora) {
    newRow2 = $('<tr>');
    newCol2 = '<td>' + obj_hora.Hora[item].string + '</td>';
    newRow2.append(newCol2);
    for(var item2 in obj_data.Data) {

        newCol2 = '<td>' + '<input type="checkbox" class="horario" data-key_data="'+obj_data.Data[item2].data+'" data-key_hora="'+obj_hora.Hora[item].hora+'" name="'+counter+'">' + '</td>';
        newRow2.append(newCol2);
        for(var index in obj_horario.Horario) {
            if(obj_hora.Hora[item].hora == obj_horario.Horario[index].hora && obj_data.Data[item2].data == obj_horario.Horario[index].data)
                $('input[name='+counter+']').attr("checked", "true");
        }
        counter++;
    }

    $("table.horarios").append(newRow2);
}
相关问题
最新问题