Передача функции jQuery .click () в качестве переменной - PullRequest
Новая
       37

Передача функции jQuery .click () в качестве переменной

4 голосов
/ 09 февраля 2011

Я работаю с интерфейсом с вкладками и настроил следующую функцию jQuery для обработки событий нажатия моих вкладок. 

$(document).ready(function () {

    $('a#foo').click(function() {
        //content, various calls
        return false;
    });
});

Выше приведен пример одной из моих вкладок, остальные также находятся в одном блоке готовности документа. Мне нужно было сделать так, чтобы на выбранной в данный момент вкладке нельзя было повторно щелкнуть, и в некоторых других случаях я мог вручную отключить вкладки, если это необходимо. Я достиг этого через следующее: 

$('a#play').unbind('click');

Это работает нормально, и, конечно, отключает вкладки, но проблема тогда заключается в повторном связывании действия щелчка, которое когда-то было там. Я достиг этого с помощью функции связывания: 

$('a#foo').bind('click', function() {
//the same content and calls as before
return false;
});

Это также работает нормально, но оно стало очень загроможденным, так как я добавил вкладки в свой интерфейс. Непосредственное решение, по-видимому, состоит в том, чтобы создать функцию как переменную и затем передать ее в первоначальное создание щелчка и в событие привязки. Вот так: 

var Foo = new function() {
    //same content and calls as before
    return false;
}

$('a#foo').click(Foo());

$('a#foo').bind(Foo());

Это, по той или иной причине, кажется, вызывает проблемы сбоев браузера. Разве нельзя передать функцию как var в этом случае, или я просто делаю это неправильно? В качестве альтернативы, есть ли лучший способ достичь результатов, которые я ищу? Спасибо.

Ответы [ 6 ]

7 голосов
/ 09 февраля 2011 
$('a#foo').click(Foo());

$('a#foo').bind(Foo());

Foo дает вам функцию, но добавление () после нее означает, что вы вызываете функцию вместо передачи самой функции.Поскольку вы вызываете функцию, false заканчивается передачей на click и bind, очевидно, ничего не делая.Некоторые из ваших других проблем могут быть связаны с тем, что вы имитируете переключение на эту вкладку дважды (дважды вызывая обработчик событий). 

var Foo = function() {
    //same content and calls as before
    return false;
}

$('a#foo').click(Foo);

$('a#foo').bind(Foo);

^^ должен делать то, что вы хотите.

В качестве альтернативы, есть ли лучший способ добиться результатов, которые я ищу?

В настоящее время все, что мы действительно знаем о вашем дизайне, это то, что вы звоните, используя обработчик события click для переключения вкладок.Эта часть потрясающая, но нам понадобится больше информации, чтобы дать вам более глубокий ответ, который вы действительно хотите.Если вы разместите код внутри Foo, мы сможем помочь вам немного больше.: D

РЕДАКТИРОВАТЬ: кредит SLaks ♦ за замечание new в объявлении функции, которое я пропустил.Я добавлю немного больше деталей к его объяснению:

Когда вы пишете var foo = new function (...) {...}, вы делаете функцию литеральной, а затем вызываетеэто как конструктор.

Это эквивалентно

var SomeClass = function (...) {...};var foo = new SomeClass;

без фиктивной переменной SomeClass.

function() {} - это анонимная функция, как и следовало ожидать.new в javascript немного более запутанный.Когда вы вызываете функцию и начинаете ее с new, вы используете эту функцию для создания экземпляра класса, определенного в функции.В JS, в отличие от большинства других языков, все определение класса находится в одной функции-конструкторе, из которой вы устанавливаете все переменные экземпляра, например: 

Foo = function() { 
    this.a = "lala";
    this.b = 5;
}

Чтобы сделать методы экземпляра класса, вы используете атрибут prototype. Однако Я только что понял, что получил супер не по теме.Подробнее об этом здесь и здесь .: D

3 голосов
/ 09 февраля 2011

Попробуйте: 

var foo = function() // not "new function", as this creates an object!
{
    return false;
}

$("a#foo").click(foo); // not "Foo()", as you can't call an object!

Что касается лучшего способа достижения желаемого результата, у вас может быть класс на каждой вкладке, например .tab. Таким образом, вы можете просто сделать: 

$("a.tab").click(function() { return false; });

... без большого количества id с.

3 голосов
/ 09 февраля 2011

Итак, во-первых, щелчок принимает функцию, но вы вызываете без (), так как щелчок запускает функцию, когда будет готов. Добавляя (), вы вызываете его прямо вверх.

Во-вторых, bind принимает строку (к какому событию вы привязываете) И функцию (как указано выше) ...

Используйте следующее: 

function Foo() {
    //same content and calls as before
    return false;
}


$('a#foo').click(Foo);    
$('a#foo').bind('click', Foo);

Надеюсь, это поможет:)

3 голосов
/ 09 февраля 2011

Вам необходимо удалить new из определения функции и прекратить вызывать функцию при ее использовании.

Когда вы пишете var foo = new function(...) { ... }, вы делаете функцию литеральной, а затем вызываете ее как конструктор.

Это эквивалентно 

var SomeClass = function(...) { ... };
var foo = new SomeClass;

без фиктивной переменной SomeClass.

Вам нужно просто присвоить литерал функции переменной.

Когда вы пишете .click(foo()), вы вызываете foo и передаете результат в click.
Если foo не возвращает функцию, это не то, что вам нужносделать.

Вам нужно передать foo, удалив скобки.

2 голосов
/ 09 февраля 2011

Используйте другой подход, а не unbind().

Я предполагаю, что все вкладки находятся в общем контейнере.Если это так, просто используйте метод delegate() (документы) , чтобы поместить обработчик в контейнер.

Вот пример общего кода: 

$('#container').delegate('.tab:not(.selected)', 'click', function() {
    $(this).addClass('selected')
           .siblings('selected').removeClass('selected');
    // rest of the tab code
});

Это будет вызывать щелчки только по элементам .tab, которые не имеют класса .selected.Вам нужно будет изменить свой конкретный код.

0 голосов
/ 09 февраля 2011

Добавление круглых скобок вызывает функцию, но если вы хотите сделать ее классной и прочей, вы можете сделать так, чтобы Foo вернул функцию, которую нужно связать. 

function Foo(){

    return function(){
        //your onclick event handler here.
    };
}

$('a#bar').bind(Foo())

При этом используется один изФункциональные аспекты программирования javascript, замыкания, это здорово, но не так эффективно, как некоторые другие ответы.Вы должны сделать некоторые исследования о замыканиях, так как они могут быть использованы для создания некоторых интересных вещей.http://www.javascriptkit.com/javatutors/closures.shtml

...