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

Question

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

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

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

Answer 1

我已经为我的网站做了很多这样的事情，我的解决方案是您的起点和一些评论的组合：

使用命名约定，例如“element_type：id：action”。 因此，您的示例生成为“element:23:delete”。 然后你可以 split() 你抓取的 .attr("id") 并确定它是什么（"报告" vs "文件夹"）、id 以及你想要做什么（"删除"、"编辑"） “， “移动”）。

这对我来说非常有效，并且具有很强的可扩展性。

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

詹姆士

Answer 2

为什么不直接添加一个类呢？ 这也解决了拥有多个 id 的问题，正如您所回避的那样，这是不允许的，并且会导致后续 jquery 操作出现重大问题。

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

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

   });

Answer 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