Получать данные из динамически добавляемого элемента при нажатии

Question

У меня есть функция, которая динамически создает элемент:

  $('#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 пусто . Как я могу получить атрибут данных из динамически созданной ссылки?

Answer 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, но дает undefined на .data("mixedCase") - но отлично работает с .data("mixedcase") (все ниже).

Всегда используйте все нижние атрибуты для совместимости.