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

您可以使用-n kube-system jQuery在DOM中查找带选择器的元素并使其正常工作

以下是您的数据示例。

`Environment: 
    DEV_MODE=false
    NODE_ENV=production
    DEBUG_PORT=5858
Launching via npm...
npm info it worked if it ends with ok
npm info using npm@5.6.0
npm info using node@v8.9.4
npm info lifecycle SuperCineBot@1.0.0~prestart: SuperCineBot@1.0.0
npm info lifecycle SuperCineBot@1.0.0~start: SuperCineBot@1.0.0

SuperCineBot@1.0.0 start /opt/app-root/src
node main

module.js:540
    throw err;
    ^

Error: Cannot find module './dnssec'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/opt/app-root/src/node_modules/sshpk/lib/formats/auto.js:16:14)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
npm info lifecycle SuperCineBot@1.0.0~start: Failed to exec start script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! SuperCineBot@1.0.0 start: `node main`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the SuperCineBot@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /opt/app-root/src/.npm/_logs/2018-05-07T20_59_43_900Z-debug.log
`

.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")) }) })这是正确的名称。使用它而不是再次从DOM获取

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

1 个答案: