ページ上で動的に生成されたコンテンツを識別する
-
21-08-2019 - |
質問
のページに動的に生成された要素を特定のベストプラクティスの方法は何ですか?
私に説明してみましょう。私は、ユーザーがページ上で、定義としていくつかまたは同じ数の要素として存在することができ、要素のリストを持っています。項目にこれらの対応の各1それ自身のIDを持つ各。今、ユーザーがページ上でこれらの要素を編集または削除する機能を持っており、これらの操作はjQueryを使って処理されます。各要素は、(すなわち、削除および編集)、彼らは行動をすることができ、操作あたりのリンクが付属しています。
さて問題は、ユーザが選択したのどのの要素を知っています。これに対処するため、私は、それぞれが、私は、その後のjQueryを使用して取得され、ID属性として要素のIDをリンク与えます:
<a href="#" class="delete" id="<%= Model.elementID%>">Delete</a>
$(".delete").live("click", function(event) {
event.preventDefault();
var elementID = $(this).attr("id");
//other code
});
これは、同じIDを持つことができ、多くのDOM要素を意味し、これは明らかに理想からかけ離れています。代わりに私はそのような要素IDとしての私自身の属性を作成することができますが、私は、これは基準を破ると信じています。
だからあなたは何をお勧めしますことができます。どのように私は、ページ上の動的に生成された要素を識別することができますか?
解決
私は自分のサイトや私の解決策のためのかなりがあなたから開始し、コメントのいくつかの場所の組み合わせでこれをやりました
":ID:アクションELEMENT_TYPE" のような命名規則を使用します。だからあなたの例は、「:23:削除要素」で生成されています。そして、あなたは()あなたがつかんで、それが(「フォルダ」対「報告書」)であるかを決定しました.ATTR(「ID」)、ID、および何をやりたい(「削除」、「編集を分割することができます」、 "動く")。
これは私にとって非常にうまくいった、と非常にスケーラブルでいます。
あなたは簡単にjQueryを経由して、イベントを添付することができるように私は、しかし、クラスを維持したい。
ジェームズ
他のヒント
なぜだけではなく、クラスを追加しません。これはまた、あなたが許可されていませんし、その後のjqueryの操作で大きな問題が発生します逃れたように、複数のIDを持っていることの問題を解決します。
<a href="#" class="delete" id="<%= Model.elementID%>">Delete</a>
$(".delete").live("click", function(event) {
event.preventDefault();
//other code
$(yourNewElement).addClass('noob');
});
あなたができるもう一つの事はこれです:
<a href="#<%= Model.elementID%>" class="delete"> Delete </a>
$(".delete").live("click", function(event) {
event.preventDefault();
var elementID = $(this).attr("href");
// strip the preceding '#'
// rest of your code
});
PS:すべてがベストプラクティスを持っていません。いくつかのものは、単に新しいappoachを必要とします。
乾杯、JRH