Вызовите одну и ту же функцию jQuery как при загрузке, так и при нажатии.

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

Лучшее, что вы можете сделать, это:

$(function() {

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

});

->

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

});

Answer 2

Вы можете использовать функцию 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 3

Я знаю, что на этот вопрос уже был дан ответ, но это еще один хороший способ решения проблемы OP, особенно с учетом флажков, поскольку запуск события click для элемента вызывает непреднамеренную проверку / снятие флажка:

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

Этот метод также позволяет избежать распространения событий щелчка.

Answer 4

Один из способов сделать это (при условии, что ваш сайт содержит компонент кода на стороне сервера) - при необходимости скрыть / показать элемент на стороне сервера. Это означает, что при загрузке страницы отсутствует «мерцание» экрана (каким бы незначительным оно ни было).

Answer 5

вы можете избежать второго вызова функции и привязать функцию foo непосредственно к обработчику кликов:

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

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

});

Answer 6

Попробуйте это

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

Answer 7

Единственное, что вы можете сделать, это вызвать foo () следующим образом:

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