Question

我正在使用JQuery在表中添加包含复选框的行，该表具有重复的数据行（以及相关的复选框）。单击此复选框后，JQuery代码似乎无法识别该复选框。完整版本的网页可以在harley.net.au/adr/editperson.php?person=1上找到。简化版本如下：

我已经在不同的浏览器（Firefox和IE）以及运行不同版本的IIS和PHP的不同服务器上尝试过它。

网页的缩减版本：

    <form action="editperson.php" name="frmStaff" method="GET" id="Staff_List_Person" accept-charset="utf-8">
        <table id="Staff_List">
            <tr id="Staff_id_1">
                <td>John Smith</td>
                <td><a href="mailto:john@smith.com>John Smith</a></td>
                <td><input name="DeletePerson[]" type="checkbox" id="DeletePerson" value="1" /></td>
            </tr>
        </table>
</form>

页面中包含的JQuery代码如下：

$('#'+Type+'List tbody').append(data.person);

之前有一个AJAX调用将data.person设置为：

<tr id="Staff_id_3"><td>Joe Bloggs</td><td><a href="mailto:joe@bloggs.com">t</a></td><td><input name="DeletePerson[]" id="DeletePerson" value="3" type="checkbox"></td></tr>

这部分工作正常。新行将添加到表中并可见。页面上有JavaScript代码，用于选中该行的复选框时删除表中的行。代码的简化版本如下：

$('input:checkbox').click(function(){
    if ($(this).attr('id') == 'DeletePerson'){ 
        var rowId = $(this).val();
        ('#Staff_id_'+rowId).hide();
    }
});

此代码在删除现有行（即首次加载页面时在表中出现的行）时可以正常工作，但不适用于上述JQuery代码添加的任何行。勾选复选框后，似乎不会触发click事件。该问题在运行不同版本IIS的两个不同网站上的Firefox和IE中都出现。

Answer 1

首先，id属性的意思是唯一的，否则，您将遇到不确定的行为。

第二个问题之前，此站点已被多次回答。 Click event doesn't work on dynamically generated elements

$(document).on('click','input:checkbox',function(){
    if ($(this).attr('id') == 'DeletePerson'){ 
        var rowId = $(this).val();
        ('#Staff_id_'+rowId).hide();
    }
});

第三，我很确定您可以重写事件处理程序以不依赖id。像这样

$(document).on('click','input:checkbox',function(){
    var $this = $(this);
    if ($this.attr('id') == 'DeletePerson'){ 
        $this.closest('tr').hide();
    }
});

无法识别附加的复选框

1 个答案: