点击时从动态添加的元素中获取数据答案

【问题标题】：Get data from dynamically added element on click点击时从动态添加的元素中获取数据
【发布时间】：2020-08-04 10:03:18
【问题描述】：

我有一个动态创建元素的函数：

  $('#bookUserSeat').on('click', function(){
    $('#seatBookings').append('<div class="alert alert-info"><a class="deleteSeat" data-seatNumber="' + $(this).data('seatNumber')  + '"><i class="fas fa-trash"></i></div>');
    $('#modalBookSeat').modal('hide');
  });

现在我有一个可以处理点击事件的函数：

  $('#seatBookings').on('click', 'a.deleteSeat', function(){
    var seat = $(this).data('seatNumber');
    $(this).parent('div').remove();
  });

但是 var 座位是空的。如何从动态创建的链接中获取数据属性？

【问题讨论】：

我在 div#seatBookings 中有多个链接

标签： javascript jquery

【解决方案1】：

-data 和 data() 区分大小写。

但是，当您使用 .append() 时，该属性会转换为小写字母，因此您实际上有不匹配的 data-seatnumber 和 data("seatNumber")。

演示：

$("#mydiv").append('<div data-lowercase="lowercase" data-mixedCase="mixedCase">inner</div>');

console.log("lowerCase", $("#mydiv>div").data("lowerCase"));
console.log("lowercase", $("#mydiv>div").data("lowercase"));
console.log("mixedCase", $("#mydiv>div").data("mixedCase")); 
console.log("mixedcase", $("#mydiv>div").data("mixedcase"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mydiv"></div>

如您所见，data- 与mixedCase 一起添加，但在.data("mixedCase") 上提供undefined - 但与.data("mixedcase") 一起工作正常（都较低）。

为了兼容性，始终使用全低属性。

【讨论】：