2012-02-16 28 views
0

特定の要素のIDをクリックしたいと思っていますが、その要素にidがない場合、その要素はまだすべての要素のループ内にありますIDを持っている両親!親要素ではない特定の要素のIDを取得する

ここでは、特定の要素について一度だけ警告する方法を示します。

http://jsfiddle.net/RUadJ/1/

+0

ループ欲しいですか?クリックされた要素のIDが必要ですか? –

答えて

1

This example直接クリックされた要素がIDを持っている場合にのみ通知されます。

あなたが達成しようとしていることについてもっと詳しく知ることなく、より良い答えを提供することは難しいです。

$("*").click(function(e){ 
    e.stopPropagation(); 
    if($(this).attr("id") != null){ 
     alert("have id "); 
    } 
}); 
+0

'.stopPropagation()'(これは間違いがあります)を呼び出すと、 'e.target'をテストする必要はありません。なぜなら、イベントはターゲットから泡立つことはないからです。元のバージョンのコードで 'this'を使うだけです。 – nnnnnn

+0

@nnnnnn:ありがとうございます、私はあなたの訂正で答えを更新しました。 –

0

問題は*の記号です。たとえば、IMGやクラス

$("*").click(function(e).... 
1

機能は、「ループ」イベントは、DOMをバブルアップされているためである理由について、より具体的な何かを試してみてください。 、バブリングアップを停止し、ハンドラの先頭にこのコードを追加するには、次の

e.cancelBubble = true; 
if (e.stopPropagation) e.stopPropagation(); 
3

問題を、ページ上のすべての要素がにあなたのクリックハンドラを添付し、イベントバブルをクリックしました。つまり、子要素をクリックするとそのクリックハンドラが呼び出され、親のクリックハンドラが呼び出されます。あなたは次のように.stopPropagation() methodを使用してバブリングからイベントを停止することができます:

$("*").click(function(e){ 
    e.stopPropagation(); 

    // your other code here 
}); 

デモ:http://jsfiddle.net/RUadJ/6/

(またはちょうどあなたのクリックハンドラからfalseを返す。)

は、別の方法としては、event.target propertythisに比較することができます - それらが同じ場合は、あなたが「元の」クリックイベントを処理していることがわかります。 (それらが異なっている場合は、イベントは既にバブリングされていることがわかります)

P.S.すべての要素にクリックハンドラをアタッチするのは非常に非効率的です。 documentに単一のハンドラをアタッチするだけで、event.target(前述)がクリックされた元の要素になりますので、まだそのIDをテストできます。そして、あなたはクリックがすでに限りそれができるように泡立てたため、バブリングを心配する必要はありません。

$(document).click(function(e){ 
    if($(e.target).attr("id")!= null) 
     alert("have id "); 
    else 
     alert("doesn't have id "); 
}); 

デモ:http://jsfiddle.net/RUadJ/26/

+0

それは動作します、ありがとう:) – palAlaa

0

それはJavascriptのイベントバブリングです。 クリックイベントがポップアップ表示されます、あなたはそれを停止したい場合は、単に次のコードを追加します。

e.stopPropagation(); 

後のif-else文を。あなたが特定のクラス

$("div.foo").click(function(e){ 

if(!$(this).attr("id")==''){ 
    alert("have id "); 
} 
    else 
    { 
      alert("doesn't have id "); 
    } 
}); 
0

*それはすべて再びretellsので、それはあなたに2 *(要素)が表示されます非効率的であるが、どの要素のid

$("*").click(function(e){ 
    var elementCount = $("#parent").find("*").length; 
    $("body").prepend("<h3>" + elementCount + " elements found</h3>"); 
}); 
+1

ハンドラをアタッチする特定のIDを指定すると、ハンドラが実行されているときにその要素にIDがあることがわかりますか? (ハンドラを割り当てた後にidsが動的に削除されない限り) – nnnnnn

0

セレクタをターゲットにすることができ、この場合、まあ

関連する問題