识别页面上动态生成的内容答案

【问题标题】：Identifying dyamically generated content on a page识别页面上动态生成的内容
【发布时间】：2010-11-07 14:12:21
【问题描述】：

识别页面上动态生成的元素的最佳实践方法是什么？

让我解释一下。我有一个元素列表，页面上的元素可以与用户定义的一样少或多。每一个都对应一个项目，每个项目都有自己的 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，但我相信这违反了标准。

那么你有什么推荐的。如何识别页面上动态生成的元素？

【问题讨论】：

标签： c# jquery asp.net-mvc dynamic-content identification

【解决方案1】：

我已经为我的网站做了很多这样的工作，我的解决方案是结合您的起点和一些 cmets：

使用命名约定，例如“element_type:id:action”。因此，您的示例生成为“element:23:delete”。然后你可以拆分（）你抓取的.attr（“id”）并确定它是什么（“report”与“folder”），id，以及你想要做什么（“delete”，“edit ", "移动")。

这对我来说效果很好，而且非常可扩展。

不过，我会保留课程，以便您可以通过 jquery 轻松附加事件。

詹姆斯

【讨论】：

【解决方案2】：

为什么不直接添加一个类。这也解决了不允许使用多个 id 的问题，这将导致后续 jquery 操作出现重大问题。

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

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

   });

【讨论】：

如何从 JavaScript 中识别类？考虑到他们可以有很多类？
你总是可以将现有的 id 附加到带有前缀的新元素中，所以 noob_OriginalElementId
这允许您拆分字符串以取回原始ID
是的，给 ID 加上前缀是我想到的，我认为这就是类似网站的做法。

【解决方案3】：

你可以做的另一件事是：

<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

【讨论】：