[JQUERY] 이벤트를 발생시킨 요소의 ID를 얻기
JQUERY이벤트를 발생시킨 요소의 ID를 얻기
해결법
-
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.참고로,이 시도! 효과가있다!
참고로,이 시도! 효과가있다!
jQuery("classNameofDiv").click(function() { var contentPanelId = jQuery(this).attr("id"); alert(contentPanelId); });
-
3.그것은 다른 게시물에 언급되어 있지만,이 철자를 원했다 :
그것은 다른 게시물에 언급되어 있지만,이 철자를 원했다 :
$ (event.target) .ID 정의되지 않은
$ (event.target) [0] .ID는 id 속성을 제공한다.
event.target.id 또한 id 속성을 제공합니다.
this.id는 id 속성을 제공합니다.
과
정의되지 .ID $ (이).
jQuery를이 객체와 DOM은 객체 사이의 차이는, 물론입니다. 당신이 그것을 사용하는 DOM 요소 개체를해야하므로 "ID"는 DOM의 속성입니다.
(아마 다른 사람을 넘어 그래서, 나를 넘어)
-
4.모든 이벤트의 경우, 당신이 사용할 수있는 단지 jQuery를 제한하지
모든 이벤트의 경우, 당신이 사용할 수있는 단지 jQuery를 제한하지
var target = event.target || event.srcElement; var id = target.id
event.target이 실패 할 경우는 IE에 대한 event.srcElement를 다시 떨어진다. jQuery를 필요로하지 않습니다 위의 코드를 명확히뿐만 아니라 jQuery를 함께 작동합니다.
-
5.당신은 기능을 발사 객체를 참조 (이)를 사용할 수 있습니다.
당신은 기능을 발사 객체를 참조 (이)를 사용할 수 있습니다.
'이'는 각각, 결합 등에는 예를 들면, (jQuery를 컨텍스트에서) 콜백 함수의 내부에있는 경우, DOM 소자 인 클릭에 의해 호출되는 메소드.
당신이 배울 수있는 여기에 더 : http://remysharp.com/2007/04/12/jquerys-this-demystified/
-
6.나는 데이터베이스에서 동적으로 테이블을 생성 JSON에서 데이터를 수신하고 테이블에 넣어. DOM을 사용하면 다른 접근 방식을 필요로 변경되면 모든 테이블 행, 그래서, 추가 작업에 필요한 고유 한 ID를 가지고 :
나는 데이터베이스에서 동적으로 테이블을 생성 JSON에서 데이터를 수신하고 테이블에 넣어. DOM을 사용하면 다른 접근 방식을 필요로 변경되면 모든 테이블 행, 그래서, 추가 작업에 필요한 고유 한 ID를 가지고 :
$("table").delegate("tr", "click", function() { var id=$(this).attr('id'); alert("ID:"+id); });
-
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.JQuery와 오브젝트로서 소스 요소를 통해 얻어 져야한다
JQuery와 오브젝트로서 소스 요소를 통해 얻어 져야한다
var $el = $(event.target);
이렇게하면 클릭의 소스보다는 클릭 기능이 너무 할당하는 요소를 가져옵니다. 클릭 이벤트는 부모 개체에있을 때 유용 할 수 있습니다 EG.a 클릭 테이블 행의 경우, 당신은 클릭 된 셀을 필요
$("tr").click(function(event){ var $td = $(event.target); });
-
9.당신이 사용하려고 할 수 있습니다 :
당신이 사용하려고 할 수 있습니다 :
$('*').live('click', function() { console.log(this.id); return false; });
-
10.이 요소의 대부분의 유형에서 작동합니다
이 요소의 대부분의 유형에서 작동합니다
$('selector').on('click',function(e){ log(e.currentTarget.id); });
-
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.사용 이벤트 CSTE 연구진 사용할 수 있습니다
사용 이벤트 CSTE 연구진 사용할 수 있습니다
$("table").on("tr", "click", function() { var id=$(this).attr('id'); alert("ID:"+id); });
-
13.위의 답변에서 언급 한 이벤트 매개 변수보다 더 높은 Z- 인덱스에이 작품 :
위의 답변에서 언급 한 이벤트 매개 변수보다 더 높은 Z- 인덱스에이 작품 :
$("#mydiv li").click(function(){ ClickedElement = this.id; alert(ClickedElement); });
이 방법 당신은 항상 (이 예 리에서) 요소의 ID를 얻을 것이다. 또한 부모의 자식 요소를 클릭 할 때 ..
-
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.그냥이 참조를 사용
그냥이 참조를 사용
$(this).attr("id")
또는
$(this).prop("id")
-
16.this.element.attr ( "ID")는 IE8에서 잘 작동합니다.
this.element.attr ( "ID")는 IE8에서 잘 작동합니다.
-
17.
$(".classobj").click(function(e){ console.log(e.currentTarget.id); })
-
18.이러한 작업은 모두,
이러한 작업은 모두,
jQuery(this).attr("id");
과
alert(this.id);
-
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.
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"> FORM> <폼 클래스 = "항목"ID = "BBB"> FORM>
-
21.내가 함께 일하고 있어요
내가 함께 일하고 있어요
그것은 보이지 않는다 요청 기능 화재가 사용할 수 때 전술 한 바와 같이 이벤트를 찾고했지만. 내가 대신 요소의 ID를 얻을 수 this.element.attr ( "ID")를 사용하고, 그것은 잘 작동 보인다.
-
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>
from https://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] '$ (이)'와 '이'의 차이점은 무엇입니까? (0) | 2020.09.23 |
---|---|
[JQUERY] 가장 좋은 방법은 구글의 호스팅 jQuery를 사용하지만 구글 실패에 내 호스팅 라이브러리에 다시 가을 (0) | 2020.09.23 |
[JQUERY] jQuery를 애니메이션의 backgroundColor (0) | 2020.09.23 |
[JQUERY] 하이라이트 / 선택한 텍스트를 가져옵니다 (0) | 2020.09.23 |
[JQUERY] 4 레일 : 터보 링크 .ready $ (문서) ()를 사용하는 방법 (0) | 2020.09.23 |