2017-01-12 3 views
0

それは、部分的な答えと質問です:jqueryのセレクタとイベントの伝播

私が最初に多くの平らなセレクタで、古典的なjQueryの開発を開発しているが、私は、より複雑な例を保持するために「タグ」ハンドラ$("a").click (function....)を開発するために必要な。

ハンドラは、イベントの伝播が正常に行われるようにtrueを返すフィルタで始まります。

すべての標準Aタグにもこの機能が、要素の名前を使用してアクションをjqueryのセレクタによって定義されたタグは機能しません。

$('#elementname').on('click' ....) 

私は成功せず、様々なテストを行ってきました、イベントの伝播はJqueryセレクタには届きません。

自然に機能する(ただし公平ではない)単独の解決策は、他のすべてのa要素をクラスでフィルタリングし、既存のセレクタを含む第2レベルのフィルタを定義することです。それは良い解決策ではありません。

すべての名前付きAタグのJquery構造を保持し、通常のイベント伝搬ルールを使用して特定のケースを定義済みのハンドラで保持する方法を教えてください。

おかげ 宜しく三重に

+0

私たちのために例を挙げることができますか? – empiric

+0

あなたは何を試してみることができますか? – RPichioli

答えて

0

私は別の方法で説明します。私は私の説明がどこではっきりしていないと想像しています。 だから私は完全な例が、アーキテクチャが簡略化された構文与えることはありません。これにより

// html 
<a id="elementId1" .... ></a> 
<a id="elementId2" .... ></a> 
<a id="elementId3" .... ></a> 
<a id="elementId4" .... ></a> 

// JQuery 
$('#elementId1').on('click', f1()) 
$('#elementId2').on('click', f2()) 
$('#elementId3').on('click', f3()) 
$('#elementId4').on('click', f4()) 

$("a").on('click', function() { 
    var $id = $(this).get(0).hash; 
    if ($id.indexOf("element") >= 0) return true; 
    if ($id.indexOf("someothers") >= 0) { 
      do something special 
    } 
    // remaining cases 
    return true; // end bubbling then goto standard system events management 
}); 

を任意の<a id="any" href ="<an url>" >Got to this</a>

は、彼のオプションで起動されます。

$("a").on...を指定しないと、$('#elementId1').on('click' ....)が処理されます。 しかし、これらのJQハンドラは、$("a").on(click....が設定されてもキャッチされません。 これらのIDに対してJQによって設定されたイベントは、これ以上処理されません(システムからAタグに関連付けられたクリックイベントは、JQによって設定されたイベントによって忘れ去られます)。

私の質問:

が、それは、そのようなJQ <selector>.on('click'...が他のシステムイベントとして処理されなければならないような方法です。 Aタグハンドラは、標準ではないすべてのものを管理することなく、識別可能な要素clickイベントに対して特定のアクションを実行するためのフックです。

本当か間違った問題ですか?

敬具

三重に


注:$( "A")JQオブジェクトを使用し、全体の階層に保持しているソリューションは、自然機能:

$("a").on('click', function() { 
    var $id = $(this).get(0).hash; 
    if ($id.indexOf("element") >= 0) { 
     if ($id.indexOf("element1") >= 0) { f1() } 
     else if ($id.indexOf("element2") >= 0) { f2() } 
     else if ($id.indexOf("element3") >= 0) { f3() } 
     else if ($id.indexOf("element4") >= 0) { f3() } 
    } 
    if ($id.indexOf("someothers") >= 0) { 
      do something special 
    } 
    // remaining cases 
    return true; // end bubbling then goto standard system events management 
}); 

この方法は単純なようですが、単純な場合のみです。インタラクションがあると、それを保持することが難しくなる可能性があります。

関連する問題