클릭시 동적으로 추가 된 요소에서 데이터 가져오기

질문

동적으로 요소를 만드는 함수가 있습니다.

  $('#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 자리는 비어 있습니다. 동적으로 생성 된 링크에서 데이터 속성을 어떻게 얻을 수 있습니까?

답변1

-data 및 data () 는 대소문자를 구분합니다.

그러나 .append () 를 사용하면 속성이 소문자로 변환되므로 실제로는 data-seatnumber 및 data ( "seatNumber") <가 있습니다. / code> 일치하지 않습니다.

데모:

$("#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>

Expand snippet

보시다시피 data-는 mixedCase 와 함께 추가되지만 .data ( "mixedCase") undefined 를 제공합니다. >-그러나 .data ( "mixedcase") (모두 소문자)에서는 잘 작동합니다.

호환성을 위해 항상 모두 더 낮은 속성을 사용하십시오.

 

 

 

 

출처 : https://stackoverflow.com/questions/63244535/get-data-from-dynamically-added-element-on-click