Vorbei jQuery .klicken Sie auf() eine Funktion als eine variable

Arbeite ich mit einem tabbed-interface und habe folgende jQuery-Funktion einrichten, um den Griff, die Sie auf Veranstaltungen meines tabs.

$(document).ready(function () {

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

Die oben ist ein Beispiel von einem meiner tabs, die anderen sind auch innerhalb des gleichen Dokuments bereit blockieren. Was ich tun musste, war, es so machen das derzeit ausgewählte Registerkarte konnte nicht wieder angeklickt, und dass in einigen anderen Fällen konnte ich manuell deaktivieren, Registerkarten, wenn nötig. Ich erreicht diese über den folgenden:

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

Dies funktioniert gut, und es ist sicherlich deaktiviert die tabs aber das problem wird dann rebinding klicken Sie auf die Aktion, war einmal dort. Ich erreichte dies über die bind-Funktion:

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

Diese funktioniert auch einwandfrei, aber es hat sich überaus unübersichtlich wie ich haben Hinzugefügt Registerkarten, um mein UI. Die unmittelbare Lösung zu sein scheint zu schaffen, die Funktion als eine variable und übergeben Sie es in den ersten Klick-Erstellung und in die Bindung, die Veranstaltung. Etwa so:

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

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

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

Diese, für einen oder anderen Grund scheint zu sein, verursachen browser abstürzt Fragen. Ist es nicht möglich, übergeben eine Funktion als eine Variable in diesem Fall oder bin ich einfach nur etwas falsch? Alternativ gibt es einen besseren Weg, um die Ergebnisse erzielen, die ich Suche? Danke.

InformationsquelleAutor keybored | 2011-02-09
  1. 7
    $('a#foo').click(Foo());

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

    Den Foo gibt Ihnen die Funktion, aber das hinzufügen ()'s nach der es heißt, Sie sind aufrufen der Funktion statt der übergabe der Funktion selbst. Da hast du den Aufruf der Funktion false endet immer übergeben click und bind offensichtlich nichts zu tun. Andere Probleme resultieren aus der Tatsache, dass Sie simuliert die Umschaltung auf die Registerkarte zweimal (Aufruf der event-handler zweimal).

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

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

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

    ^^ sollte das tun, was Sie wollen.

    Alternativ gibt es einen besseren Weg, um die Ergebnisse erzielen, die ich Suche?

    Derzeit alles, was wir wirklich wissen, über Ihre Gestaltung ist, dass Sie anrufen, verwenden Sie einen click-Ereignishandler zu Tab wechseln. Das Teil ist genial, aber wir brauchen mehr info um Ihnen die tiefere Antwort, die Sie wirklich wollen. Wenn Sie nach dem code, innen Foo wir sollten in der Lage sein zu helfen, ein bisschen mehr. 😀

    EDIT: Gutschrift auf SLaks♦ für die Geltendmachung der new in der Deklaration der Funktion, die ich verpasst. Ich werde fügen Sie ein wenig mehr detail seiner Erklärung:

    Beim schreiben var foo = new
    function(...) { ... }, Sie machen eine
    Funktion literal, dann ruft es als
    Konstruktor.

    Es ist äquivalent zu

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

    ohne SomeClass dummy-variable.

    Den function() {} ist eine anonyme Funktion, wie man es erwarten würde. new in javascript ist ein wenig verwirrend. Wenn Sie eine Funktion aufrufen und Ihr vorausgehen mit new, verwenden Sie die Funktion zum instanziieren eine Instanz einer Klasse in der Funktion definiert. In JS, im Gegensatz zu den meisten anderen Sprachen, ist die gesamte definition einer Klasse ist in einer Konstruktor-Funktion, aus der Sie die Instanz-Variablen, etwa so:

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

    Machen-Instanz Methoden der 'class', verwenden Sie das Prototyp-Attribut. Jedoch ich erkannte, dass ich bekommen habe super-off-topic. Lesen Sie mehr auf, dass hier und hier. 😀

    • Wow dieser ganze thread ist super informativ/nützlich. Ich hatte noch nie realisiert, dass die JS-Funktionen gearbeitet, die Art und Weise. Vielen Dank allen und danke @CrazyJugglerDrummer für die Umsetzung es alle zusammen, arbeitete wie ein Charme!
    InformationsquelleAutor Gordon Gustafson
  2. 3

    Müssen Sie entfernen new von der definition einer Funktion und beenden Sie die Funktion aufrufen, wenn Sie es verwenden.

    Beim schreiben var foo = new function(...) { ... }, du machst ein funktionsliteral, dann Aufruf als Konstruktor.

    Es ist äquivalent zu

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

    ohne die SomeClass dummy-variable.

    Sie brauchen, um einfach ordnen Sie der Funktion literal die variable.

    Beim schreiben .click(foo()) Sie sind aufrufen foo, und übergeben das Ergebnis an click.

    Es sei denn foo gibt eine Funktion, das ist nicht, was Sie tun möchten.

    Müssen Sie gehen foo sich durch das entfernen der Klammern.

    InformationsquelleAutor SLaks
  3. 3

    Also, Erstens, klicken Sie auf akzeptiert eine Funktion, sondern Sie nennen, ohne die () als klicken wird die Funktion ausgeführt, wenn Sie bereit sind. Indem die () rufen Sie es sofort.

    Zweitens, binden Sie einen string (was Ereignis Sie verbindlich sind) UND eine Funktion (wie oben)...

    Verwenden Sie die folgenden:

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


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

    Hoffe, das hilft 🙂

    InformationsquelleAutor Damien-Wright
  4. 3

    Versuchen:

    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!

    Da für einen besseren Weg, um zu erreichen das Ergebnis Sie suchen, könnten Sie eine Klasse auf jeder Registerkarte, wie .tab. Auf diese Weise können Sie nur tun:

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

    ... ohne Flusen, um mit einer Menge von ids.

    InformationsquelleAutor
  5. 2

    Nehmen einen anderen Ansatz, und nicht unbind().

    Ich nehme die tabs sind alle in einem gemeinsamen container. Wenn dem so ist, verwenden Sie einfach die delegieren()(docs) Methode, um einen handler auf die container.

    Hier einen generischen code-Beispiel:

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

    Diese wird nur auslösen, klickt auf .tab Elemente, die nicht über die .selected Klasse. Dann müssen Sie für Ihren speziellen code.

    InformationsquelleAutor user113716
  6. 0

    Hinzufügen der Klammer ruft die Funktion auf, aber wenn Sie wollte auf cool machen und so Zeug, könntest du es so machen, dass Foo kehrte die Funktion gebunden zu sein.

    function Foo(){

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

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

    Das macht die Verwendung einer auf javascript-Funktion Programmierung Aspekte, Sperrungen, die ist cool, aber nicht so effizient, wie einige der anderen Antworten. Sie sollten einige der Forschung über Verschlüsse, wie Sie verwendet werden können, um ein paar Coole Sachen.
    http://www.javascriptkit.com/javatutors/closures.shtml

    InformationsquelleAutor invisible bob
Schreibe einen Kommentar