2011-08-12 9 views
2

http://jsfiddle.net/rHVcX/1/複数のクリックイベント

異なるセレクタを使用した場合、1つの要素に複数のクリックイベントを持ってすることが可能ですか?

<button id="test" class="testclass">test</button> 
<button id="test2" class="testclass2">test 2</button> 

//only B 
$('.testclass')[0].click(function(){alert('A');}); 
$('#test').click(function(){alert('B');}); 

// A and B 
$('#test2').click(function(){alert('A2');}); 
$('#test2').click(function(){alert('B2');}); 
+0

'$(」。TestClassを)[0]'あなたのDOM要素ではなく、jQueryオブジェクトを提供します。 '$( '。testclass').eq(0)'または '$( '。testclass')'のみでなければなりません。 –

答えて

4

はい、これは完全に可能です。

しかし、あなたはjQueryを悪用しています。
$(...)[0]を書くと、最初の生DOM要素がセットになります。
jQueryオブジェクトではないため、jQueryのclickメソッドを呼び出すことはできません。

代わりにeqメソッドを呼び出す必要があります。このメソッドは、元のセットから単一の要素を含むjQueryオブジェクトを返します。

$('.testclass').eq(0).click(...)

0

に変更し、それをはいあなたは、オブジェクト上に複数のクリックイベントを持つことができます。ハンドラは追加された順番で呼び出されます(あなたがreturn falseと言っていない限り)。

0

[0]を削除するか、それが可能である.eq(0)

<button id="test" class="testclass">test</button> 
<button id="test2" class="testclass2">test 2</button> 

//only B 
$('.testclass').click(function(){alert('A');}); 
$('#test').click(function(){alert('B');}); 

// A and B 
$('#test2').click(function(){alert('A2');}); 
$('#test2').click(function(){alert('B2');}); 

作業フィドル

http://jsfiddle.net/rHVcX/2/

1

に変更します。

しかし、この行:

$('.testclass')[0].click(function(){alert('A');}); 

は動作しません。それは次のようになります。

$('.testclass').eq(0).click(function(){alert('A');}); 

インデックスゼロではなく、フィルタjQueryオブジェクトであなたのDOM要素を与えるjQueryオブジェクトのインデックス作成します。

http://api.jquery.com/eq

関連する問題