如何访问动态创建的元素的属性？

Question

我正在尝试获取存储在已添加到DOM中的动态创建元素的属性中的数据。

单击按钮时，将进行AJAX调用，该调用返回对象的集合。 然后，使用Javascript / JQuery，为每个返回的对象添加新的HTML元素，并将其属性值添加到元素的属性中。 然后，我向每个动态创建的元素中添加一个点击侦听器。 单击时，我想获取这些属性中的值。

目前存在id值，但name的值是undefined 。

例如，给定以下HTML：

<input type="button" id="button" value="Get objects" />
<div id="objects-wrapper"></div>

服务器的Json响应：

[
  {
    "id": 16,
    "name": "eeeee",
  },
  {
    "id": 17,
    "name": "MIT Top New"
  }
]

$(document).ready(function() {
  $('#button').click(function() {
    var id = $(this).attr('id');
    var posting = $.post('/get/objects', {
      id: id
    });

    posting.done(function(data) {
      var objectsWrapper = $('#objects-wrapper');
      objectsWrapper.empty();

      if (data.length == 0) {
        $(objectsWrapper).html('No objects found...');
      } else {
        $(objectsWrapper).empty();
        for (i = 0; i < data.length; i++) {
          var object = $('<div class="object"><a href="#" name="' + data[i].name + '" class="object-link" id="' + data[i].id + '">' + data[i].name + '</a></div>').on('click', function() {
            var objectId = $(this).attr('id'); // <-- is present
            var name = $(this).attr('name'); // <-- undefined

            // do something with name
          });
          objectsWrapper.append(object);
        }
      }
    });
    return false;
  });
});

该name值存在并且被用作锚文本。 我已经验证为以下标记：

<a href="#" name="MIT Top New" description="MIT Top News" class="object-link" id="17">MIT Top New</a>

如何正确获得动态创建的锚元素的属性name ？

Answer 1

您可以使用jQuery的.find()在DOM中使用选择器查找元素并使之工作

这是您的数据的示例。

 var data = [ { "id": 16, "name": "eeeee", }, { "id": 17, "name": "MIT Top New" } ]; data.forEach(e=>{ $("#objects-wrapper").append(` </br> <a href="#" name="${e.name}"> ${e.name} </a> </br>`) }); $("#button").click(function(){ $("#objects-wrapper").find("a").each(function(){ console.log($(this).attr("name")) }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="button" id="button" value="Get objects" /> <div id="objects-wrapper"></div> 

顺便说一下，在代码中，为什么需要从DOM中获取它？ 您是自己分配名称的，为什么不使用它呢？ data[i].name这是正确的名称。 使用它而不是再次从DOM中获取