时间戳

首页 > 解决方案 > 我想从动态创建的 span 元素中使用 jquery 获取 data-id 和 data-test 的值

jquery - 我想从动态创建的 span 元素中使用 jquery 获取 data-id 和 data-test 的值

问题描述

单击时，我没有从 span 元素中获取 data-id 值。

function getvalue() {
  alert($(this).data('id'));
  alert($(this).attr('data-id'));
  alert($(this).data('test'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="myclass" data-id="bcd" data-test="sjd" onclick="getvalue(this)">click here</span>

要从 span 元素上的 data-id 和 data-test 获取数据，请单击另一件事我已经动态创建了它们，因此我无法使用 #id 进行单击。请帮助。

标签： jquery

解决方案

问题是因为您使用的是on*事件属性，所以this在函数中是window，而不是引发事件的元素。您将元素作为参数传递给函数，因此您只需要在函数签名中定义参数，如下所示：

function getvalue(el) {
  console.log($(el).data('id'));
  console.log($(el).attr('data-id'));
  console.log($(el).data('test'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="myclass" data-id="bcd" data-test="sjd" onclick="getvalue(this)">click here</span>

话虽如此，您不应该使用事件属性，因为它们非常过时，因此被认为是不好的做法。改为使用不显眼的事件处理程序。

您的问题还指出元素是动态附加的，因此在这种情况下您需要使用委托的事件处理程序。因此，您可以使用on()：

$(function() {
  $(document).on('click', '.myclass', function() {
    console.log($(this).data('id'));
    console.log($(this).data('test'));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="myclass" data-id="bcd" data-test="sjd">click here</span>

另外，请注意使用console.log()for 调试而不是alert(). 后者应该避免，因为它强制数据类型，这可以隐藏问题，而且它也是模态的，这很烦人。

推荐阅读