Question

我有一个包含以下格式的表的页面：

    <table id="gigsTable">
        <tr><th>Date</th><th>Time</th><th>Location</th><th>Remove</th></tr>
        <tr class="gigRow">
            <td><input name="date" type="text" value="Date goes here"></td>
            <td><input name="time" type="text" value="Time goes here"></td>
            <td><input name="location" type="text" value="Location goes here"></td>
            <td class="remove"><input name="remove" type="checkbox" /></td>
        </tr>

当单击remove列中的复选框时，其父行淡出然后使用以下jQuery删除：

    $("#gigsTable tr .remove input").click(function() {
        $(this).parent().parent().fadeOut(500, function() {
            $(this).remove();
            rowCount--;
        });
    });

我还有一个按钮，点击时会在表格中添加一行：

    $('#addGig').click(function() {
        $('#gigsTable tr:last').after('<ROW FORMAT FROM HTML>');
        rowCount++;
    });

这一切都正常但是当我尝试删除使用上述方法插入的行时没有任何反应。为什么呢？

Answer 1

click事件处理程序只能访问最初加载页面时存在的元素。要控制动态添加的元素，请使用on或delegate。

此外，您可以使用parent().parent()

而不是closest('tr')

试试这个：

$("#gigsTable tr .remove").delegate('input', 'click', function() {
    $(this).closest('tr').fadeOut(500, function() {
        $(this).remove();
        rowCount--;
    });
});

或者如果您使用的是jQuery 1.7+，请使用on。

$("#gigsTable tr .remove").on('click', 'input', function() {
    $(this).closest('tr').fadeOut(500, function() {
        $(this).remove();
        rowCount--;
    });
});

Answer 2

使用on()代替直接事件click()。

当您插入行时，它将自动订阅所有新创建的控件。

Answer 3

您添加的行尚未绑定到click事件，您需要on或live之类的内容，具体取决于您的jQuery版本。

Answer 4

原因是您在页面加载时设置了yur remove函数，并且不包含新元素。因此，尝试使用Jquery的live函数，它也会将click事件绑定到您的新元素。

 $("#gigsTable tr .remove input").live("click",function() {
        $(this).parent().parent().fadeOut(500, function() {
            $(this).remove();
            rowCount--;
        });
    });

由Jquery插入的表行不像原始HTML中的表行

4 个答案: