이벤트에서 jQuery를 사용하여 클릭 된 요소를 얻습니까?

다음 코드를 사용하여 동적으로 생성 된 버튼을 클릭 할 때 감지합니다.

$(document).on("click",".appDetails", function () {
    alert("test");
});

일반적으로 방금했다면 클릭 한 요소를 가져 오는 데 $('.appDetails').click()사용할 수 있습니다 $(this). 위의 코드로 어떻게이 작업을 수행 할 수 있습니까?

예를 들면 :

$(document).on("click",".appDetails", function () {
    var clickedBtnID = ??????
    alert('you clicked on button #' + clickedBtnID);
});

가능한 한 간단합니다.

$(this)여기에서도 사용

$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
   alert('you clicked on button #' + clickedBtnID);
});

함수에 이벤트 매개 변수가 없습니다.

$(document).on("click",".appDetails", function (event) {
    alert(event.target.id);
});

이를 처리하는 기존 방법은 ES6에서 잘 작동하지 않습니다. 대신 다음을 수행 할 수 있습니다.

$('.delete').on('click', event => {
  const clickedElement = $(event.target);

  this.delete(clickedElement.data('id'));
});

이벤트 대상은 클릭 한 요소이며 원하는 요소가 아닐 수 있습니다 (이벤트를 수신 한 하위 요소 일 수 있음). 실제 요소를 얻으려면 :

$('.delete').on('click', event => {
  const clickedElement = $(event.target);
  const targetElement = clickedElement.closest('.delete');

  this.delete(targetElement.data('id'));
});

간단한 방법은 데이터 속성을 HTML 태그에 전달하는 것입니다.

예:

<div data-id='tagid' class="clickElem"></div>

<script>
$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('data');
   alert('you clicked on button #' + clickedBtnID);
});
</script>