javascript - 如何绑定(bind)Jquery函数来点击？

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 7 年前。

我写了这个函数:

(function($){
    $.fn.loaderHolder = function(action){
        var loaderHolder = $(document.createElement('div'))
                                .addClass('loaderHolder'),
            safeImage = $(document.createElement('img'))
                            .attr("src", "/static/images/icons/vault-bg.svg")
                            .addClass("safe"),
            lockImage = $(document.createElement('img'))
                            .attr("src", "/static/images/icons/vault-lock.svg")
                            .addClass("lock"),
            loader = loaderHolder.append(safeImage, lockImage);

        return this.each(function(){
            if(action === "add"){
                $(this).append(loader); 
            } else if(action === "remove"){
                $(this).children('.loaderHolder').remove();
            };
        });
    };
}(jQuery));

该函数生成或删除加载程序。我可以像这样运行该函数:$('.foo').loaderHolder('add'); .

但是如果我想将加载器添加到动态生成的元素中，我需要像这样编写代码:

$('.holder').on('click', '.foo', function(){
   $(this).loaderHolder('add'); 
});

我真的不喜欢匿名函数。有没有其他方法可以在没有匿名函数的情况下编写此代码？

谢谢!

编辑:感谢您的所有回复。编辑我的代码以使其正确，忘记在动态生成的部分中使用父选择器。

但我只是想知道像这样的标记:

$('.holder').on('click', '.foo', {action: 'add'}, $(this).loaderHolder); 

我知道这是错误的，但是有什么办法可以做到这一点吗？或者你只需​​要匿名函数？

Answer 1

用函数名称代替匿名函数

$('.foo').on('click', youfun);

对于动态添加的元素，您需要 event delegation .

$('staticParentSelector').on('click', '.foo', youfun);

Event delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.