Question

我写过这个函数：

(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

事件委托允许我们将单个事件监听器附加到父元素，将为匹配a的所有后代触发选择器，无论这些后代现在存在还是被添加到将来

如何绑定Jquery函数来点击？

1 个答案: