이벤트에서 jQuery를 사용하여 클릭한 요소를 가져오시겠습니까?

이벤트에서 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'));
});

그렇게 할 수 있는 방법은 여러 가지가 있습니다.

첫 번째 방법은 자바스크립트 대상을 사용하는 것입니다.

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

$(".masonry__img").click((e) => {
      console.log(e.currentTarget.currentSrc);
});

클래스 masonry__img가 있는 각 이미지에 onClick 처리기를 추가합니다.

간단한 방법은 데이터 속성을 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>

언급URL : https://stackoverflow.com/questions/16091823/get-clicked-element-using-jquery-on-event