我想从动态创建的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进行点击.请帮助.

最佳答案

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

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()进行调试,而不是使用alert().应该避免使用后者,因为它会强制使用可能隐藏问题的数据类型,并且也是模态的,这很烦人.