获取动态创建元素的值返回空答案

【问题标题】：Getting values of dynamically created elements returns empty获取动态创建元素的值返回空
【发布时间】：2017-01-12 18:34:24
【问题描述】：

我有一个 div，其中 <a> 在其中动态创建和删除。我想遍历 div(#skills) 的子项(<a>) 并获取它们的值。我确实解决了。但是当我使用 each() 遍历它们时，它只会在我控制台记录它时返回空。我是 JS 和 jquery 的新手，不知道是什么导致了这个问题我的分区

<div id="skills"></div>

将添加的动态元素是锚标记。

<a name="skill_wanted[]" class="label label-default" value="MYSQL">MYSQL
<span class="glyphicon glyphicon-remove"></span></a>

还有提供字形图标的 span 类。在这里，我只想获取锚标记的值。在这种情况下 MYSQL 是在创建锚标记时动态创建的。

var skills = new Array();
$('#skills a').each(function(){
skills = $(this).val();
console.log(skills);
});

我想获取每个锚标记值并将其添加到数组技能中。但是当我这样做时。它只是在控制台中打印数字。就像有 2 个锚标签一样 2 被打印，如果 5 则 5. 没有锚标记值。这是怎么回事？

【问题讨论】：

skills.push($(this).val());
@SandeepNayak 真的吗？
@NaveenKumar skills.push($(this).attr("value")); 应该是路要走。然而value 属性在锚元素上没有意义。
然后@Jai：你的评论也不起作用。 Skills.push($(this).attr("value")) 必须工作。
@VforVendetta 确定。那不会是经过编辑的。

标签： javascript jquery html

【解决方案1】：

您应该知道value 属性不是锚的有效属性，您不能使用.val() 方法直接获取值。这仅适用于表单元素。

在您的情况下，您可以将其简化为使用.map()，它为您提供了一个集合中的数组。

要使其成为有效属性，您可以在锚元素上使用 data-* 属性：

data-value="MYSQL"

然后在您的 js 代码中进行上述更新：

var skills = $('#skills a').map(function(){
   return $(this).data('value');
}).get();
console.log(skills);

【讨论】：

【解决方案2】：

属性value 用于<button>、<input> 和<option> 元素。

在这种情况下，不要使用value 和.val()，而是使用：

- `data-value` and `.data('value')`

工作示例：

$(document).ready(function(){

    $('a').each(function(){
    	console.log($(this).data('value'));
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL0">MYSQL0
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL1">MYSQL1
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL2">MYSQL2
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL3">MYSQL3
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL4">MYSQL4
<span class="glyphicon glyphicon-remove"></span>
</a>

<a name="skill_wanted[]" class="label label-default" data-value="MYSQL5">MYSQL5
<span class="glyphicon glyphicon-remove"></span>
</a>

【讨论】：