我单击时没有从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().应该避免使用后者,因为它会强制使用可能隐藏问题的数据类型,并且也是模态的,这很烦人.
