Question

我需要关注可排序列表的输入和textarea元素这是我的代码（1）。

a）当我加载列表时它工作正常，因为它为每个输入添加了一个监听器 b）当我向列表中添加一个新元素时，它会复制监听器。

应该如何避免这种情况？也许尝试使用事件委托在身体上使用单个监听器？任何想法？
感谢

（1）

setTimeout(function () {
    var setFocus = function () {
        $('.ui-sortable').find('input, textarea').click(function () {
            $(this).focus();
        });
    };
    $('.ui-sortable').on('DOMNodeInserted', setFocus);
    setFocus();
}, 0);

Answer 1

这应该有效：

$('body').on('.ui-sortable input, .ui-sortable textarea', 'click', function () {
    $(this).focus();
});

Answer 2

您可以将其删除并重新添加

$('.ui-sortable').off('DOMNodeInserted').on('DOMNodeInserted', setFocus);

您可以尝试像这样添加

$(document).on('DOMNodeInserted', '.ui-sortable', setFocus);

Answer 3

您应该修改代码以仅添加一次侦听器，或者首先删除旧侦听器：

$('.ui-sortable').off('DOMNodeInserted').on('DOMNodeInserted', setFocus);

如果你有其他你不想删除的监听器，你可以在添加监听器时使用命名空间功能，这样你就只能删除你感兴趣的监听器：

$('.ui-sortable').off('DOMNodeInserted.setFocus').on('DOMNodeInserted.setFocus', setFocus);

Answer 4

尝试委派活动..因此，每次创建新元素时都不需要分配事件

$(document).on('DOMNodeInserted', '.ui-sortable', setFocus);

避免重复听众

4 个答案: