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

Question

点击时我没有从 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 进行单击。请帮忙。

Answer 1

问题是因为您使用的是 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>

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

您的问题还指出元素是动态附加的，因此在这种情况下您需要使用委托(delegate)事件处理程序。因此，您可以使用 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()。应避免后者，因为它会强制数据类型，这可能会隐藏问题，而且它也是模态的，这很烦人。