实时功能无法在动态行中运行

时间:2013-05-12 18:46:28

标签: jquery html5

我有一个表,其中包含一个CheckBox和两列。单击CheckBox时,我将行更改为颜色黑色,并将<input type="hidden" name=old的名称更改为<input type="hidden" name=new,然后在取消选中时,将行更改回正常状态。它只在静态时工作。

问题:但是当我添加动态行时,请点击复选框。什么都没发生。我已经使用了live功能。但仍然无法工作。

以下是静态表的工作代码:

对于jquery部分:

$(".blackH").click(function(){
    if($(this).is(":checked")){
        $(this).parent().parent().css("background-color","#CCC");
        $("input[name='old\\["+ $(this).data("old") +"\\]']").attr("name","new[" + $(this).data("old") + "]");
    }
    else{
        $(this).parent().parent().css("background-color","#FFF");
        $("input[name='new\\["+ $(this).data("old") +"\\]']").attr("name","old[" + $(this).data("old") + "]");
    }
});
我使用的

Live函数但不工作:

$(".blackH").click(function(){
if($(this).is(":checked")){
    $(this).parent().parent().css("background-color","#CCC");
    $("input[name='old\\["+ $(this).data("old") +"\\]']").attr("name","new[" + $(this).data("old") + "]");       
}
else{
    $(this).parent().parent().css("background-color","#FFF");
    $("input[name='new\\["+ $(this).data("old") +"\\]']").attr("name","old[" + $(this).data("old") + "]");
}
});

对于html部分:

        <tr class="trhighlight tagReflect {{tag_cnt}}" data-tagno="{{tag_cnt}}">
            <td><input type="checkbox" value="" class="del_chk blackH" data-savetag="{{tag_cnt}}"></td>
            <td style="width:70%;">DUMMY_DATA_1</td>
            <td class="" style="display: none;">DUMMY_DATA_2</td>
            <input type="hidden" name="old[{{tag_cnt}}]" value="">
        </tr>

希望有人会帮忙。感谢。

1 个答案:

答案 0 :(得分:0)

演示环境here没有问题,但我正在运行jQuery 1.8.3。我建议采用更优雅的方式......

$(function() {
    $("tr .blackH").live("click", function() {
        $(this).closest("tr").css("background-color", this.checked ? "#ccc" : "");
    });
});

希望这有帮助。