Question

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

让我解释一下。我有一个元素列表，在页面上可以有少量或多个用户定义的元素。这些中的每一个对应于一个项目，每个项目都有自己的ID。现在，用户可以在页面上编辑或删除这些元素，并使用jQuery处理这些操作。每个元素都有一个可以操作的操作链接（即删除和编辑）。

现在问题在于知道用户选择了哪个元素。为了解决这个问题，我给每个链接提供了元素的ID作为ID属性，然后我使用jQuery获取：

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

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

这显然远非理想，因为它意味着许多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

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

3 个答案: