복붙노트

[JQUERY] 이벤트를 발생시킨 요소의 ID를 얻기

JQUERY

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

해결법


  1. 1.jQuery를에 event.target 항상 이벤트가 함수에 전달 된 매개 변수 이벤트를 트리거 요소를 의미합니다. http://api.jquery.com/category/events/event-object/

    jQuery를에 event.target 항상 이벤트가 함수에 전달 된 매개 변수 이벤트를 트리거 요소를 의미합니다. http://api.jquery.com/category/events/event-object/

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

    참고이 작업도하지만, 당신이 다음 예 : $ (이)로 참조해야 그 위에 jQuery를 기능을 사용하려면 그렇다면, JQuery와의 객체가 아닌 것을 그 :

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

  2. 2.참고로,이 시도! 효과가있다!

    참고로,이 시도! 효과가있다!

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

  3. 3.그것은 다른 게시물에 언급되어 있지만,이 철자를 원했다 :

    그것은 다른 게시물에 언급되어 있지만,이 철자를 원했다 :

    $ (event.target) .ID 정의되지 않은

    $ (event.target) [0] .ID는 id 속성을 제공한다.

    event.target.id 또한 id 속성을 제공합니다.

    this.id는 id 속성을 제공합니다.

    정의되지 .ID $ (이).

    jQuery를이 객체와 DOM은 객체 사이의 차이는, 물론입니다. 당신이 그것을 사용하는 DOM 요소 개체를해야하므로 "ID"는 DOM의 속성입니다.

    (아마 다른 사람을 넘어 그래서, 나를 넘어)


  4. 4.모든 이벤트의 경우, 당신이 사용할 수있는 단지 jQuery를 제한하지

    모든 이벤트의 경우, 당신이 사용할 수있는 단지 jQuery를 제한하지

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

    event.target이 실패 할 경우는 IE에 대한 event.srcElement를 다시 떨어진다. jQuery를 필요로하지 않습니다 위의 코드를 명확히뿐만 아니라 jQuery를 함께 작동합니다.


  5. 5.당신은 기능을 발사 객체를 참조 (이)를 사용할 수 있습니다.

    당신은 기능을 발사 객체를 참조 (이)를 사용할 수 있습니다.

    '이'는 각각, 결합 등에는 예를 들면, (jQuery를 컨텍스트에서) 콜백 함수의 내부에있는 경우, DOM 소자 인 클릭에 의해 호출되는 메소드.

    당신이 배울 수있는 여기에 더 : http://remysharp.com/2007/04/12/jquerys-this-demystified/


  6. 6.나는 데이터베이스에서 동적으로 테이블을 생성 JSON에서 데이터를 수신하고 테이블에 넣어. DOM을 사용하면 다른 접근 방식을 필요로 변경되면 모든 테이블 행, 그래서, 추가 작업에 필요한 고유 한 ID를 가지고 :

    나는 데이터베이스에서 동적으로 테이블을 생성 JSON에서 데이터를 수신하고 테이블에 넣어. DOM을 사용하면 다른 접근 방식을 필요로 변경되면 모든 테이블 행, 그래서, 추가 작업에 필요한 고유 한 ID를 가지고 :

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

  7. 7.이벤트를 트리거 요소 우리는 이벤트 속성에있다

    이벤트를 트리거 요소 우리는 이벤트 속성에있다

    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/에서 읽을 수있는 더 많은에 대한 이벤트 위임


  8. 8.JQuery와 오브젝트로서 소스 요소를 통해 얻어 져야한다

    JQuery와 오브젝트로서 소스 요소를 통해 얻어 져야한다

    var $el = $(event.target);
    

    이렇게하면 클릭의 소스보다는 클릭 기능이 너무 할당하는 요소를 가져옵니다. 클릭 이벤트는 부모 개체에있을 때 유용 할 수 있습니다 EG.a 클릭 테이블 행의 경우, 당신은 클릭 된 셀을 필요

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

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

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

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

  10. 10.이 요소의 대부분의 유형에서 작동합니다

    이 요소의 대부분의 유형에서 작동합니다

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

  11. 11.이 같은있을 수 있습니다 위임 이벤트 핸들러의 경우 :

    이 같은있을 수 있습니다 위임 이벤트 핸들러의 경우 :

    <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는, 정의되지 않은 것을 확인할 수 있습니다. 당신은 작은 체크로이 주위를 얻을 수 있기 때문에 좋아한다 :

    $(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
        });
    });
    

    이벤트 위임을 사용하는 경우, 됐나 () 메소드는 (다른 것들 사이) 이벤트 대상이 당신은 그것을 필요 무엇을 실제로 것을 확인하기위한 매우 유용합니다. 그것을 아래 검색 (좁은 방 ()) .find (선택에서와 같이 일반적으로 좁은 방 (결합)) DOM 트리를 검색하고 (선택을) .find 사용 .closest (선택)를 사용합니다. 당신은) (.closest를 사용하는 경우에만 첫 번째 일치 상위 요소를 반환으로 .find ()가 일치하는 모든 자손을 반환하면서, () 좁은 방 사용할 필요가 없습니다.


  12. 12.사용 이벤트 CSTE 연구진 사용할 수 있습니다

    사용 이벤트 CSTE 연구진 사용할 수 있습니다

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

  13. 13.위의 답변에서 언급 한 이벤트 매개 변수보다 더 높은 Z- 인덱스에이 작품 :

    위의 답변에서 언급 한 이벤트 매개 변수보다 더 높은 Z- 인덱스에이 작품 :

    $("#mydiv li").click(function(){
    
        ClickedElement = this.id;
        alert(ClickedElement);
    });
    

    이 방법 당신은 항상 (이 예 리에서) 요소의 ID를 얻을 것이다. 또한 부모의 자식 요소를 클릭 할 때 ..


  14. 14.

    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.


  15. 15.그냥이 참조를 사용

    그냥이 참조를 사용

    $(this).attr("id")
    

    또는

    $(this).prop("id")
    

  16. 16.this.element.attr ( "ID")는 IE8에서 잘 작동합니다.

    this.element.attr ( "ID")는 IE8에서 잘 작동합니다.


  17. 17.

    $(".classobj").click(function(e){
        console.log(e.currentTarget.id);
    })
    

  18. 18.이러한 작업은 모두,

    이러한 작업은 모두,

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

    alert(this.id);
    

  19. 19.당신은 ID와 변경된 항목의 값을 얻을 수있는 기능을 사용할 수 있습니다 (내 예제에서, 나는 선택 태그를 사용했습니다.

    당신은 ID와 변경된 항목의 값을 얻을 수있는 기능을 사용할 수 있습니다 (내 예제에서, 나는 선택 태그를 사용했습니다.

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

  20. 20.

    aaa.onclick = handler;
    bbb.onclick = handler;
    
    function handler() { 
      var test = this.id; 
      console.log(test) 
    }
    

    aaa.onclick = 처리기; bbb.onclick = 처리기; 함수 핸들러 () { var에 테스트 = this.id; CONSOLE.LOG (테스트) } <폼 클래스 = "항목"ID = "AAA"> <폼 클래스 = "항목"ID = "BBB">


  21. 21.내가 함께 일하고 있어요

    내가 함께 일하고 있어요

    그것은 보이지 않는다 요청 기능 화재가 사용할 수 때 전술 한 바와 같이 이벤트를 찾고했지만. 내가 대신 요소의 ID를 얻을 수 this.element.attr ( "ID")를 사용하고, 그것은 잘 작동 보인다.


  22. 22.각도 7.x의 경우에는 기본 요소와 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>
    
  23. from https://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event by cc-by-sa and MIT license