どうやってJQueryが動的に生成した要素の値を取得しますか?

5359 ワード

jquery appendのノードを取得するlive方法


私はjqueryで動的にliラベルを作成した後、いつも彼のidやclassを取得できません.コードは以下の通りです.
$("ul").append(「名前」);
そして
$(".name").click(function(){alert(「appendを取得したノード」)
残念なことにこれでは手に入らない
正しい方法は次のとおりです.
$(“.name").live("click", function() {
alert(「取得しました」);  });
ps:jquery append後のノードを取得するにはliveメソッドが必要です
jqueryの紹介:
 

戻り値:jQuerylive(type,[data],fn)


概要


jQueryは、一致するすべての要素にイベント処理関数を追加し、この要素が後で追加されても有効です.
この方法は基本的です.bind()法の変異体.使用するbind()の場合、セレクタが一致する要素にはイベント処理関数が追加され、後で追加する要素はありません.そのためにはもう一度使用する必要がある.bind()でいいです.例えば
Click here
この要素に簡単なclickイベントをバインドできます.
$('.clickme').bind('click', function() { alert("Bound handler called."); });

要素をクリックすると、警告ボックスがポップアップします.そして、この後に別の要素が追加されたことを想像してみてください.
$('body').append('

Another target
');

この新しい要素はセレクタ「.clickme」にもマッチするが、この要素が呼び出されているためである.bind()の後に追加されたので、この要素をクリックしても効果はありません.
.live()はこのような状況に対応する方法を提供しています.clickイベントをこのようにバインドした場合:
$('.clickme').live('click', function() { alert("Live handler called."); });

新しい要素を追加します.
$('body').append('

Another target
');

その後、新しい要素をクリックすると、イベント処理関数をトリガーすることができます.
イベントの委任
.live()メソッドがDOMに追加されていない要素に有効であるのは、イベント依頼が使用されているためです.祖先要素にバインドされたイベント処理関数は、子孫でトリガーされたイベントに応答することができます.渡すLive()のイベント処理関数は要素にバインドされず、DOMツリーのルートノードにバインドされた特殊なイベント処理関数として使用されます.例では、新しい要素をクリックすると、次の手順に従います.
clickイベントの生成
処理する

イベント処理関数がに直接バインドされていないため
イベントはDOMツリーのルートノードまで泡が立ち続け、デフォルトではこの特殊なイベント処理関数がバインドされています.
実行由Live()バインドの特殊なclickイベント処理関数.
このイベント処理関数は、まず、イベントオブジェクトのtargetを検出して、続行する必要があるかどうかを決定する.このテストは$(event.target)を検出することによって行われた.closest('.clickme')が一致する要素を見つけて実現できるかどうか.
一致する要素が見つかった場合、元のイベント処理関数が呼び出されます.
上記の手順5でテストを行うのは、イベントが発生したときだけですので、追加した要素はいつでもこのイベントに応答できます.
追加の説明
.live()は役に立つが、その特殊な実現方式のため、いかなる場合でも簡単に置き換えることはできない.bind().主な違いは次のとおりです.
jQuery 1.4では、.Live()メソッドはカスタムイベントをサポートし、すべてのJavaScriptイベントもサポートします.jQuery 1.4.1では、focusおよびblueイベントもサポートされている(より適切にマッピングされ、泡を立てることができるfocusinおよびfocusout上にマッピングされる).また、jQuery 1.4.1では、hover(「mouseenter mouseleave」)もサポートされている.しかしjQuery 1.3では.xでは、サポートされているJavaScriptイベントとカスタムイベントのみをサポートします:click,dblick,keydown,keypress,keyup,mousedown,mousemove,mouseout,mouseover,mouseup.
.live()はDOM遍歴で見つけた要素を完全にサポートしていない.代わりに、常に1つのセレクタの後に直接使用すべきである.live()の方法は、前の例で述べたように.
イベント処理関数として使用する.live()バインド後、他のイベント処理関数の実行を停止するには、falseを返さなければなりません.呼び出しのみstopPropagation()はこの目的を達成できません.
参考.bind()メソッドは、イベントバインドに関するより多くの情報を得ることができる.
jQuery 1.4.1では、.Live()は複数のイベントを受け入れることができ、空間でイベントを区切ることができ、類似を提供している.bind()の機能.たとえば、mouseoverとmouseoutイベントを「live」で同時にバインドできます.
$('.hoverme').live('mouseover mouseout', function(event) { if (event.type == 'mouseover') { // do something on mouseover } else { // do something on mouseout } });

jQuery 1.4.3では、1つ以上のイベントタイプの文字列と関数のデータマッピングをバインドして実行できます.
$("a").live({ click: function() { // do something on click }, mouseover: function() { // do something on mouseover } });

jQuery 1.4では、dataパラメータを用いてイベント処理関数に追加情報を渡すことができる.1つの良い用途は、閉鎖による問題に対処することです.参考になるbind()の議論は、より多くの情報を得るために使用されます.
jQuery 1.4では、liveイベントをデフォルトのドキュメントのルートではなく「context」DOM要素にバインドできます.この背景を設定するには、jQueryセットまたはセレクタではなく、単一のDOM要素でjQuery()function's second argumentを使用します.
$('div.clickme', $('#container')[0]).live('click', function() { // Live handler called. });

パラメータ


type,[fn]String,FunctionV1.3


type:複数のイベントをスペースで区切る1つ以上のイベントタイプ.
fn:各マッチング要素のイベントから逆バインドするイベント処理関数

type,[data],falseString,Array,boolV1.4


type:複数のイベントをスペースで区切る1つ以上のイベントタイプ.
data:イベント処理関数に渡される追加パラメータ
false:falseに設定すると、デフォルトの動作が無効になります.

eventStringV1.4.3


1つ以上のイベントタイプの文字列と関数のデータマッピングを実行します.


説明:


クリックして生成したpは依然として同じ機能を持っている.
HTMLコード:

Click me!


jQueryコード:
$("p").live("click", function(){ $(this).after("
Another paragraph!

"); });

説明:


デフォルトのイベント動作とイベントのバブルを阻止しfalseに戻る
jQueryコード:
$("a").live("click", function() { return false; });

説明:


デフォルトのイベント動作のみをブロック
jQueryコード:
$("a").live("click", function(event){ event.preventDefault(); });