0

假设我有一张桌子：

<table id="myTable">
    <tbody>
        <tr>
            <td>
                <a class="removeLink" >Remove</a>
            </td>
        </tr>
        <tr>
            <td>
                <a class="removeLink" >Remove</a>
            </td>
        </tr>
    </tbody>
</table>
<a id="addLink">Add</a>

所以这里游戏的目的是，当点击删除链接时，相关的行将消失。

所以我有一些javascript：

<script type="text/javascript">
    $(document).ready(function () {

        $('.removeLink').click(function () {

            $(this).closest('tr').hide('slow');

        });

        $('#addLink').click(function () {

            $('#myTable').append('<tr><td><a class="removeLink" >Remove</a></td></tr>');

        });

    });
</script>

所以我有消失的部分来处理这个问题。

但是，添加链接会向表中添加一行。

现在，当我在已添加的行上单击删除时，它不会消失。有道理，因为它没有设置点击事件。

如何对此进行编码，以便添加的链接将它们的 removeLinks 挂钩隐藏？

这也是添加行的一种奇怪方式吗？有没有更好的办法？

4

2 回答 2

3

您可以使用on()：

$('#myTable').on('click', 'a.removeLink', function(e){
    $(this).closest('tr').remove();
});

on()#myTable本质上将命名的事件绑定到指定的元素（on()方法。如果是，则执行匿名的第三个参数函数。

将事件处理绑定到最接近受事件处理/绑定点存在于 DOM 中的事件影响的元素的元素似乎更好。在这种情况下，这将是tbody，这将导致以下（仅略微）修改的代码：

$('#myTable tbody').on('click', 'a.removeLink', function(e){
    $(this).closest('tr').remove();
}

其他替代方案是delegate()（尽管这已被on()jQuery 1.7 取代）：

$('#myTable').delegate('a.removeLink', 'click', function(e){
    $(this).closest('tr').remove();
}

或者live()，尽管从 jQuery 1.7 开始不推荐使用，并且即使在live()可用的地方，delegate()也建议优先使用。那说：

$('#myTable').live('click', 'a.removeLink', function(e){
    $(this).closest('tr').remove();
}

参考：

于 2012-08-02T20:52:56.597 回答
0

如果on()不起作用，您可以尝试live().

$('a.removeLink').live('click', function(e){
    $(this).closest('tr').remove();
});

它会检查单击的元素是否是#myTable 中的“a”，而不是检查该元素是否在页面加载时位于 DOM 中。通过这种方式，您可以动态地将元素添加到您的页面，并且仍然可以获得您期望的效果。

于 2012-08-02T20:57:17.110 回答