0

クリック イベントを介して、カスタム属性
<div class="added" myValue="hello"></div>を持つ要素を DOM に挿入しました。

私は一般的な関数を書きました：

$('.added').each(function(){
    console.log( $(this).attr('myValue') );
});

うまくいきません。$.each()動的要素を処理できると思いましたか?

質問への更新：

私は使用.each()が間違ったアプローチであることを認識しています。しかし、要素にイベント ハンドラーをアタッチしたくない場合はどうすればよいでしょうか。いつDOMに追加されたかに関係なく、特定のクラス名の要素に対して自動的に何かをしたいだけです。一般的なユースケースのようです。

4

4 に答える 4

4
  • いいえ、each動的に追加された要素は処理しません。jQuery オブジェクトが作成 (または変更) されたときに DOM に存在していた要素にのみ適用されます。
  • .eachid は DOM 内で一意である必要があるため、id セレクターの関数は意味がありません。これを読むことをお勧めします: jQuery IDセレクターは最初の要素に対してのみ機能します

each要素を注入した後に呼び出すか、セレクターのようにデリゲート イベントを使用する必要があります。on

于 2013-01-08T21:56:02.747 に答える
3

$.each()このメソッドを呼び出しているときにセレクターに一致する要素をループします。したがって、要素を DOM に動的に追加する前にこのメソッドを呼び出すと、将来のイベントで仮想的に DOM に追加する可能性のある要素がこのメソッドによって返されるとは期待できません。

そのため、要素を DOM に追加した後$.each()で関数を呼び出すだけです。

また、コードに矛盾があるようです。単一の要素$('#added')しか返せないID セレクターを使用しています。はい、ID は DOM 全体で一意である必要があります。そのため、壊れた HTML がない限り、単一の要素を呼び出してもほとんど意味がありません。.each()

于 2013-01-08T21:56:10.320 に答える
1

クリックイベントが発生したら、そこで「何か」を実行します。

$("#someelemt").click(function(){
    var el = $("<div class='added' myValue='hello'></div>").appendTo("#someotherelement");
    console.log(el.attr("myValue")); // <--- something
});

IDは一意である必要があるため、クラスに追加して変更しました。

2つを分離する場合は、クリックイベントでイベントをトリガーしてから、イベント委任を使用してそれをリッスンします。

$("#someelemt").click(function(){
    var el = $("<div class='added' myValue='hello'></div>").appendTo("#someotherelement");
    el.trigger("added");
});
$(document).on("added","div",function(){
    console.log(this.getAttribute("myValue")); // <--- something
});

$.each将来の要素では機能せず、コードの実行時に存在する要素のみで機能します。

質問の更新更新
これは、非効率的なコードを記述しないと不可能です。非効率的で減価償却され、すべてのブラウザでサポートされていないDOMMutationEventsを使用するか、新しい要素のdomの検索を常に実行するため非効率的なsetIntervalを使用する必要があります。

于 2013-01-08T21:59:06.950 に答える
0

id複数の要素で同じ属性を使用することはできません。毎回異なるIDが必要です。IDセレクターは、これらすべての要素の最初#の要素のみを選択するため、ループしているようには見えません。

他の要素のIDを実際に変更する必要がありますが、これは実際には引き続き機能します。

$("[id=added]").each(...
于 2013-01-08T21:56:16.413 に答える