javascript - 避免重复听众

Question

我需要将焦点放在可排序列表的输入和文本区域元素上。
这是我的代码（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);

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

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

Answer 3

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

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

您可以尝试像这样添加它

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

Answer 4

尝试委派事件.. 这样您就不需要在每次创建新元素时都分配事件

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