Jquery 如何将链接的事件添加到表中_Jquery_Html

Jquery 如何将链接的事件添加到表中

jquery html

Jquery 如何将链接的事件添加到表中,jquery,html,Jquery,Html,假设我有一张桌子： <table id="myTable"> <tbody> <tr> <td> <a class="removeLink" >Remove</a> </td> </tr> <tr> <td>

假设我有一张桌子：

<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>


$（文档）.ready（函数（）{
$（'.removeLink'）。单击（函数（）{
$（this）.closest（'tr'）.hide（'slow'）；
});
$（'#addLink'）。单击（函数（）{
$（'#myTable'）。追加（'Remove'）；
});
});

所以我有一部分在处理这个

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

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

如何对此进行编码，以便添加的链接将其removeLinks连接起来以隐藏

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

您可以在（）上使用

：

on（）

实质上是将命名事件绑定到指定元素（

#myTable

），并且，在“听到”这些事件时，事件检查目标是否匹配提供的选择器（传递给

on（）的第二个参数）

方法。如果是，则执行匿名的第三个参数函数

似乎最好将事件处理绑定到最接近DOM中事件处理/绑定点处受事件影响的元素的元素。在这种情况下，这将是

tbody

，这将导致以下（仅轻微）修改代码：

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

其他备选方案有

delegate（）

（尽管这已被jQuery 1.7中的

on（）

所取代）：

或者

live（）

，尽管这在jQuery 1.7中已被弃用，而且即使在

live（）

可用的地方，也建议优先使用

delegate（）

。也就是说：

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

参考资料：