을 얻 ID 의 요소를 발생시킨 이벤트

StackOverflow https://stackoverflow.com/questions/48239

  •  09-06-2019
  •  | 
  •  

문제

가를 얻을 수 있는 방법은 요소의 ID 가 이벤트를 실행하는?

나는 생각하고 다음과 같습니다.

<html>
  <head>
    <script type="text/javascript" src="starterkit/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("a").click(function () {
          var test = caller.id;
          alert(test.val());
        });
      });
    </script>
  </head>
  <body>
    <form class="item" id="aaa">
      <input class="title"></input>
    </form>
    <form class="item" id="bbb">
      <input class="title"></input>
    </form>
  </body>

</html>

를 제외하고는 물론 var test 이 포함되어야 합 id "aaa", 는 경우 이벤트가 발생에서 첫 번째 양식 "bbb", 는 경우 이벤트가 발생에서 두 번째는 형태입니다.

도움이 되었습니까?

해결책

에 jQuery event.target 항을 참조하는 요소를 트리거 이벤트 event 은 매개변수 함수에 전달됩니다. http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

참고하는 것도 this 또한 일이지만,그것은 jQuery 체,그래서 당신이 원하는 경우 사용 jQuery 기능에서 그것은 다음을 참조해야 합니다 그것으로 $(this), 예:

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

다른 팁

참고로,이 시도!그것은 작품!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

하지만 그것은에서 언급된 기타의 게시물이 있는데,이웃:

$(event.target).id undefined

$(event.target)[0].id 제공 id 속성이 있습니다.

event.target.id 또한 id 속성이 있습니다.

this.id 제공 id 속성이 있습니다.

고

$(this).id 가 정의되지 않습니다.

의 차이점은 물론,사 jQuery 체 및 DOM 개체입니다."id"은 돔 제공 그래서 당신은 DOM 요소 물체를 사용합니다.

(을 넘어 내게,그래서 그것은 아마 넘어져 다른 사람)

모든 이벤트에 대한 국한되지 않을 사용할 수 있습 jQuery

var target = event.target || event.srcElement;
var id = target.id

가 event.target 실패하면 그것이 떨어지는 뒤에 event.srcElement IE.을 명확히 위의 코드를 필요로하지 않습 jQuery 하지만 또한 작품으로 jQuery.

당신이 사용할 수 있는 (this) 을 참조하는 개체를 발사합니다.

'this' 가 DOM 소 안에 있을 때의 콜백 함수(의 컨텍스트에서 jQuery),예를 들어,불 클릭하여,각각에 바인딩,etc.방법이 있습니다.

여기는 자세히 알아볼 수 있습니다: http://remysharp.com/2007/04/12/jquerys-this-demystified/

나는 테이블을 생성을 동적으로 밖으로 데이터베이스,데이터를 수신 JSON 넣어 테이블에 있습니다.모든 테이블을 행 독특한 ID, 필요한 추가 작업을 위해,경우에 따라서,DOM 변경이 필요할 다른 방법:

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});

요소를 발사하는 이벤트가 우리가 우리에 이벤트 성

event.currentTarget

우리가 얻 DOM 노드 체에는 설정의 이벤트 처리기입니다.

가장 중첩된 노드를 시작한 버블 링 처리

event.target

이벤트 객체가 항상 첫 번째 특성의 이벤트 처리기를 들어:

document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});

에 대해 더 많은 이벤트를 위임할 수 있에서 읽 http://maciejsikora.com/standard-events-vs-event-delegation/

Source 요소로 jQuery 개체해야를 통해 얻은

var $el = $(event.target);

이 당신의 원인을 클릭하기보다는 요소를 클릭합 기능은 너무 할당 됩니다.할 때 유용할 수 있습니다 이벤트에 부모 개체 예를 들어.클릭 이벤트 테이블에서 행해야 합 셀 클릭한

$("tr").click(function(event){
    var $td = $(event.target);
});

당신이 사용하려고 할 수 있습니다:

$('*').live('click', function() {
 console.log(this.id);
 return false;
});

의 경우 위임받아 이벤트 처리기,수있는 무언가 이것을 좋아한다:

<ul>
    <li data-id="1">
        <span>Item 1</span>
    </li>
    <li data-id="2">
        <span>Item 2</span>
    </li>
    <li data-id="3">
        <span>Item 3</span>
    </li>
    <li data-id="4">
        <span>Item 4</span>
    </li>
    <li data-id="5">
        <span>Item 5</span>
    </li>
</ul>

과 당신의 JS 코드는 다음과 같이

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

        //do something with itemId
    });
});

당신은 더 많은 가능성이 보는 itemId 가 undefined, 으로 컨텐츠의 포장 <span>, 즉, <span> 아마 이벤트를 대상입니다.당신은 주위에 얻을 수 있습니다 이것으로 작은 체크인처럼,그래서:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
            itemId = $target.data('id');

        //do something with itemId
    });
});

또는,당신이 선호하는 경우 가독성을 극대화하기 위해(그는 또한 불필요한 반복의 jQuery 포장 통화):

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId;

        $target = $target.is('li') ? $target : $target.closest('li');
        itemId = $target.data('id');

        //do something with itemId
    });
});

할 때 사용하여 이벤트를 위임 .is() 방법한 권한을 가지고 있는지 확인하는 귀하의 이벤트 대상(다른 것들 사이에)은 실제로 어떤 당신이 그것을 필요로 합니다.사 .closest(selector) 검색 DOM 트리,그리고 사용 .find(selector) (일반적으로 결합 .first(), 에서와 같이, .find(selector).first() 용)검색니다.당신을 사용할 필요가 없 .first() 사용하는 경우 .closest(), 으로,그것만 반환합니다 첫 번째 일치하는 상위 요소는 동안, .find() 환 모든 일치하는 후손.

사용 사용할 수 있습니다.이벤트

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });

var buttons = document.getElementsByTagName('button');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
    buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
    // do something based on button selection here...
    alert(this.id);
}

작업 JSFiddle 기.

이 작품에 더 높 z-index 보다 이벤트 매개변수에 언급된 위 답변:

$("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});

이 방법은 당신이 항상 id 의(이 예제에서 li)요소입니다.또한 클릭했을 때 아이의 요소를 부모..

this.element.attr("id") 에서 잘 작동합 IE8.

이들 모두 작업

jQuery(this).attr("id");

고 

alert(this.id);

그냥 사용 this reference

$(this).attr("id")

나

$(this).prop("id")

기능을 사용할 수 있습을 얻는 id 값에 대해 변경된 항목(이 예제에서 사용했을 선택하 태그입니다.

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );

이 작품으로 대부분의 유형 요소:

$('selector').on('click',function(e){
    log(event.currentTarget.id);
    });

난 작업

jQuery 자동완성

했고 event 위에서 설명한 대로,하지만 요청을 기재하지 않는 것을 사용할 수 있습니다.내가 사용하는 this.element.attr("id") 을 얻는 요소의 ID 를 대신,그리고 그것은 잘 작동합니다.

의 경우에는 각도 7.x 얻을 수 있는 기본 요소와 요소의 id 또는 속성입니다.

myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.log(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

html:

<div class="list-item" (click)="myClickHandler($event)">...</div>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top