Question

我有一个HTML表和jQuery处理程序来使用.next（）和.prev（）来上下移动行，但我还想添加新行并在添加新行并尝试移动旧行或者他们移动的仓位多于预期。以下是jsfiddle http://jsfiddle.net/3CQYN/

的示例

$(function() {

    initControls();

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

        $('<tr><td>TEST</td><td><a href="#" class="up">Up</a> <a href="#" class="down">Down</a></td></tr>').appendTo($('table tbody'));

        initControls();

    });

});

function initControls()
{
    $('.down').click(function() {
        var parentRow = $(this).closest('tr');  

        parentRow.insertAfter(parentRow.next());
});

$('.up').click(function() {
        var parentRow = $(this).closest('tr');  

        parentRow.insertBefore(parentRow.prev());
    });
}

尝试上下移动行，然后添加一些新行并再次上下移动OLD行，您将看到问题。

Answer 1

每次添加新行时，都会重新绑定处理程序，最后会绑定到单个向上和向下链接的多个处理程序。相反，使用事件委托（仅在DOM就绪时执行一次）：

$(document).on('click', '.down', function() {
    // ...
});

$(document).on('click', '.up', function() {
    // ...
});

http://jsfiddle.net/Gt4Zq/

请注意，如果你能找到一个要绑定到的容器，那就更接近document以外的元素，那就更好了。

jQuery遍历动态生成的DOM（next（），prev（））

1 个答案: