如何绑定Jquery的点击函数

How to bind Jquery function to click?

本文关键字：函数 Jquery 何绑定 绑定      更新时间：2023-09-26

我写了这个函数:

(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);

我知道这是错的，但是有没有办法像这样做呢?还是只需要匿名函数?

用函数名代替匿名函数

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

对于动态添加的元素，您需要事件委托。

$('staticParentSelector').on('click', '.foo', youfun);
事件代表团

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为所有匹配选择器中是否存在这些后代，或者是否已添加到未来。

相关文章：