Question

在我的“更新”页面中，我经常需要在页面加载和单击某个复选框上调用相同的jQuery函数，大多数情况下是这样的：

function foo(){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}

$(function() {

    foo(); // this is launched on load
    $('#mycheckbox').click(function(){
        foo(); // this is launched on checkbox click
    })  

});

在页面加载时，可以根据数据库值检查或不检查复选框：这就是为什么我需要启动foo（）;在负载

嗯，这很好用，但我总是想知道......是否有更好或最优雅的解决方案？提前致谢

Answer 1

您可以使用trigger()功能立即触发事件;

$('#mycheckbox').click(function (){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}).trigger('click');

但是，请记住，这也会触发您在元素上定义的任何其他点击处理程序。

或者，您可以编写一个小的jQuery插件来为您完成;

jQuery.fn.nowAndOn = function (event, handler) {
    handler();

    this.bind(event, handler);

    return this; // support chaining
};

你会像使用它一样;

$(function() {
    $('#mycheckbox').nowAndOn('click', function (){
        if ($('#mycheckbox').is(':checked')){
            $('.myclass').hide();
        } else {
            $('.myclass').show();
        }
    });
});

但问题是，在点击处理程序中，this通常是当前元素;而通过像我们这样调用handler();，this会指向window（这与您发布的确切片段无关，因为您不使用this }）。

要修复this，我们可能会增加一些复杂性，并使用Function.call方法设置this的值;

jQuery.fn.nowAndOn = function (event, handler) {
    this.each(function () {
        handler.call(this);
    });

    this.bind(event, handler);

    return this;
};

但是，如果你依赖传递的Event对象，你仍然会遇到问题......

Answer 2

你能做的最好的就是：

$(function() {

    foo(); // this is launched on load
    $('#mycheckbox').click(function(){
        foo(); // this is launched on checkbox click
    })  

});

- ＆GT;

$(function() {
    foo(); // this is launched on load
    $('#mycheckbox').click(foo);  

});

Answer 3

你可以避免第二个函数调用并将函数foo直接绑定到click处理程序：

function foo(){
    if ($('#mycheckbox').is(':checked')){
        $('.myclass').hide();
    } else {
        $('.myclass').show();
    }
}

$(function() {
    foo(); // this is launched on load
    $('#mycheckbox').click(foo)  

});

Answer 4

执行此操作的一种方法（假设您的站点包含服务器端代码组件）将隐藏/显示服务器端呈现中的项目（如果适用）。这意味着在页面加载时没有屏幕'闪烁'（无论多么微小）。

Answer 5

我知道这个问题之前已经得到了回答，但这是另一个解决OP问题的好方法，特别是考虑到复选框，因为触发元素上的click事件会导致无意中选中/取消选中复选框：

$('#myCheckbox').bind('click init', function() {
    $('.myDiv').toggle($('#myCheckbox').is(':checked'));
}).trigger('init');

此方法还可以避免点击事件传播。

Answer 6

你唯一能做的就是像这样调用foo（）：

$('#mycheckbox').click(foo);

Answer 7

试试这个

$('#mycheckbox').click(function (){
     $(this).is(':checked')?$('.myclass').hide():$('.myclass').show();
}).click();

在加载和单击时调用相同的jQuery函数

7 个答案: