如何使用last-child jquery追加td？

Question

我创建了以下代码：

<table id="map">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table> 

<script>
    $(document).ready(function(){
        $('td:last-child').mouseenter(function(){
            var tdId = $(this).attr('id');
            var newId = parseInt(tdId);
            $(this).after('<td>new</td>');
        });         
    });
</script>

当鼠标在最后一个孩子上输入tds时，我想创建一个新的td。该代码正在运行。但是当我想再次创建一个新的td时，我必须将鼠标悬停在<td>3</td>而不是自动创建的最后td上！我该如何解决这个问题？！

Answer 1

使用事件委派而不是将处理程序直接绑定到td元素：

$('#map').on('mouseenter', 'td:last-child', function(){
   // code here
});

http://jsfiddle.net/DyTpJ/