jQuery .click（）関数を変数として渡す

Question

私はタブ付きインターフェイスで作業しており、次のjQuery関数を設定して自分のタブのクリックイベントを処理させます。

$(document).ready(function() { 

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

上記は私のタブの1つの例であり、他のものも同じ文書の準備ブロック内にあります。私がする必要があったのは、現在選択されているタブを再度クリックすることができないようにすることと、必要に応じてタブを手動で無効にすることができる場合がありました。私は、次を経由して、これを達成：

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

これは正常に動作し、それは確かに、タブを無効にしますが、問題はその後、かつてあったクリック・アクションを再バインドになります。私はバインド機能を経由して、これを達成：

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

また、これは正常に動作しますが、私は私のUIにタブを追加したとして、それは非常に雑然となっています。直接的な解決策は、関数を変数として作成し、それを最初のクリック作成とバインディングイベントに渡すことです。ように：

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

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

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

これは、理由の1つまたは別の理由で、ブラウザクラッシュの問題を引き起こしているようです。この場合varとして関数を渡すことはできませんか、それとも間違っていますか？あるいは、私が探している結果を得るための良い方法がありますか？ありがとう。

Answer 1

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

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

Fooはあなたに機能を与えるが、()年代を追加すると、それはあなたが機能を呼び出す代わりに、機能自体を渡していることを意味した後。あなたは関数を呼び出すので、とbindには、falseが渡され、明らかに何もしません。他の問題のいくつかは、そのタブへの切り替えを2回シミュレートして（イベントハンドラを2回呼び出して）実際に発生することがあります。

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

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

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

^^必要な操作を行う必要があります。

---

また、私が探している結果を達成するためのより良い方法はありますか？

現在のところ、私たちがあなたのデザインについて知っているのは、クリックイベントハンドラを使用してタブを切り替えることです。その部分はすばらしいですが、あなたが本当に望むより深い答えをあなたに提供するためには、より多くの情報が必要になります。 Fooのコードを投稿すると、もう少しお手伝いできるはずです。 ：D

---

EDIT：SLaksへの信用は、私は逃した関数宣言でnewに気付いため♦。

あなたが書いたのvar FOO =新しい 機能（...）{...}、あなたがして、 関数はリテラル作り、それを呼び出している：私は彼の説明にもう少し詳細を追加します コンストラクタとして

var SomeClass = function（...）{...}; var foo = new SomeClass;

SomeClassダミー変数なし。

function() {}は、期待どおりの無名関数です。 javascriptのnewはもう少し混乱しています。関数を呼び出してそれを先にnewとすると、関数で定義されたクラスのインスタンスをインスタンス化するためにその関数を使用しています。あなたは、

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

は「クラス」のインスタンスメソッドを作るために：JSでは、他のほとんどの言語とは異なり、クラスの定義全体が、そこからあなたはすべてのインスタンス変数なので、などを設定し、1つのコンストラクタ関数でありますprototype属性を使用します。 しかし私はちょうど私がスーパーオフトピックを得たことに気づいた。詳しくはhereとhereをご覧ください。 ：D

Answer 2

newを関数定義から削除し、関数の呼び出し時に関数の呼び出しを停止する必要があります。

var foo = new function(...) { ... }と書くと、関数をリテラルにしてから、それをコンストラクタとして呼び出すことになります。

それはSomeClassダミー変数なし

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

に相当します。

関数リテラルを変数に代入するだけで済みます。

---

あなたが.click(foo())を書くとき、あなたはfooを呼び出し、そしてclickに結果を渡しています。
fooが関数を返さない限り、それはあなたがしたいことではありません。

括弧を削除してfoo自体に渡す必要があります。

Answer 3

まず、関数を受け入れますが、（）を使わないで呼び出すと、クリックすると関数が実行されます。 （）を追加することで、それをまっすぐに呼び出すことができます。助け:)

を

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


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

希望：

第二

は、バインド文字列（あなたが結合しているものイベント）AND関数（上記のように）...

使用以下になります

Answer 4

試してみてください。

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 Sの多くの綿毛に周りにせずに。

Answer 5

別のアプローチをとり、unbind()を使用しないでください。

タブがすべて共通のコンテナにあると仮定します。その場合は、delegate()^(docs)メソッドを使用して、コンテナにハンドラを配置してください。ここで

は、一般的なコードの例です：

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

これだけ.selectedクラスを持っていない.tab要素のクリックをトリガーします。特定のコードを変更する必要があります。

Answer 6

括弧を追加すると関数が呼び出されますが、クールなものにしたい場合は、Fooが関数を返すようにすることができます。

function Foo(){ 

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

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

これはクールではJavaScriptの関数型言語の側面、閉鎖、上の1つの使用を可能

が、他の回答の一部ほど効率的ではありません。あなたはいくつかのクールなものを作るために使用することができるので、閉鎖についていくつかの研究を行う必要があります。 http://www.javascriptkit.com/javatutors/closures.shtml