0

ページ上で動的に生成された要素を識別するためのベストプラクティスの方法は何ですか？

説明させてください。私は要素のリストを持っています、ページ上にユーザーが定義するのと同じくらい少ないか、または多くの要素があるかもしれません。これらはそれぞれ、独自のIDを持つアイテムに対応しています。これで、ユーザーはページ上のこれらの要素を編集または削除することができ、これらの操作はjQueryで処理されます。各要素には、アクション（つまり、削除と編集）できる操作ごとにリンクが付いています。

ここで問題となるのは、ユーザーがどの要素を選択したかを知ることです。これに対処するために、各リンクに要素のIDをID属性として指定し、jQueryを使用して取得します。

<a href="#" class="delete" id="<%= Model.elementID%>">Delete</a>

<script type="text/javascript">
    $(".delete").live("click", function (event) {
        event.preventDefault();
        var elementID = $(this).attr("id");
        //other code
    });
</script>

これは、多くのDOM要素が同じIDを持つ可能性があることを意味するため、明らかに理想からはほど遠いものです。または、elementIDなどの独自の属性を作成することもできますが、これは標準に違反していると思います。

だからあなたは何をお勧めできますか。ページ上で動的に生成された要素を識別するにはどうすればよいですか？

4

3 に答える 3

2

私は自分のサイトでこれをかなり行ってきました。私の解決策は、あなたがどこから始めたかといくつかのコメントを組み合わせたものです。

「element_type：id：action」などの命名規則を使用します。したがって、生成される例は「element：23：delete」です。次に、取得した.attr（ "id"）をsplit（）して、それが何であるか（"report"と"folder"）、id、および実行したいこと（ "delete"、 "edit"）を決定できます。 "、 "動く"）。

これは私にとって非常にうまく機能し、非常にスケーラブルです。

ただし、jqueryを介してイベントを簡単にアタッチできるように、クラスは保持しておきます。

ジェームズ

于 2009-07-02T11:12:23.740 に答える
0

代わりにクラスを追加してみませんか。これにより、複数のIDが存在するという問題も解決されます。これは、理解できなかったため許可されておらず、後続のjquery操作で大きな問題が発生します。

<a href="#" class="delete" id="<%= Model.elementID%>">Delete</a>

  $(".delete").live("click", function(event) {
      event.preventDefault();
      //other code
      $(yourNewElement).addClass('noob');

   });
于 2009-07-02T09:52:33.073 に答える
0

あなたができるもう一つのことはこれです：

<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：すべてにベストプラクティスがあるわけではありません。新しいアプローチが必要なものもあります。

乾杯、jrh

于 2009-07-02T10:15:04.153 に答える