Lấy ID của phần tử đã tạo ra một sự kiện

Có cách nào để lấy ID của phần tử kích hoạt sự kiện không?

Tôi đang nghĩ một cái gì đó như:

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});

<script type="text/javascript" src="starterkit/jquery.js"></script>

<form class="item" id="aaa">
  <input class="title"></input>
</form>
<form class="item" id="bbb">
  <input class="title"></input>
</form>

Tất nhiên ngoại trừ var testnên chứa id "aaa", nếu sự kiện được kích hoạt từ hình thức đầu tiên và "bbb", nếu sự kiện được bắn từ hình thức thứ hai.

Trong jQuery event.targetluôn đề cập đến phần tử đã kích hoạt sự kiện, trong đó eventtham số được truyền cho hàm. http://api.jquery.com/carget/events/event-object/

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

Cũng lưu ý rằng thisnó cũng sẽ hoạt động, nhưng nó không phải là một đối tượng jQuery, vì vậy nếu bạn muốn sử dụng một hàm jQuery trên nó thì bạn phải tham khảo nó như $(this), ví dụ:

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

Để tham khảo, hãy thử điều này! Nó hoạt động!

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

Mặc dù nó được đề cập trong các bài viết khác, tôi muốn đánh vần điều này:

$(event.target).id không định nghĩa được

$(event.target)[0].id đưa ra thuộc tính id.

event.target.id cũng đưa ra thuộc tính id.

this.id đưa ra thuộc tính id.

và

$(this).id không định nghĩa được.

Tất nhiên, sự khác biệt là giữa các đối tượng jQuery và các đối tượng DOM. "id" là thuộc tính DOM, do đó bạn phải ở trên đối tượng phần tử DOM để sử dụng nó.

(Nó làm tôi vấp ngã, vì vậy nó có thể vấp phải người khác)

Đối với tất cả các sự kiện, không giới hạn chỉ với jQuery, bạn có thể sử dụng

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

Trường hợp event.targetkhông thành công, nó rơi trở lại event.srcElementcho IE. Để làm rõ đoạn mã trên không yêu cầu jQuery mà còn hoạt động với jQuery.

Bạn có thể dùng (this) để tham chiếu đối tượng đã kích hoạt hàm.

'this'là một DOM phần tử khi bạn ở trong hàm gọi lại (trong ngữ cảnh của jQuery), ví dụ, được gọi bằng các phương thức nhấp, mỗi, liên kết, v.v.

Đây là nơi bạn có thể tìm hiểu thêm: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Tôi tự động tạo một bảng ra khỏi cơ sở dữ liệu, nhận dữ liệu trong JSON và đặt nó vào một bảng. Mỗi hàng trong bảng có một duy nhất ID, cần thiết cho các hành động tiếp theo, vì vậy, nếu DOM bị thay đổi, bạn cần một cách tiếp cận khác:

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

Yếu tố mà sự kiện chúng ta có trong tài sản sự kiện

event.currentTarget

Chúng tôi nhận được đối tượng nút DOM trên đó đã được thiết lập xử lý sự kiện.

Hầu hết các nút lồng nhau bắt đầu quá trình sủi bọt chúng ta có

event.target

Đối tượng sự kiện luôn là thuộc tính đầu tiên của trình xử lý sự kiện, ví dụ:

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

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

});

Tìm hiểu thêm về sự kiện ủy nhiệm Bạn có thể đọc trong http://maciejsikora.com/st Chuẩn- event-vs-event- devegation /

Phần tử nguồn dưới dạng đối tượng jQuery nên được lấy thông qua

var $el = $(event.target);

Điều này giúp bạn có được nguồn nhấp chuột, chứ không phải là yếu tố mà chức năng nhấp được gán. Có thể hữu ích khi sự kiện nhấp vào đối tượng cha mẹ EG.a sự kiện nhấp chuột trên một hàng của bảng và bạn cần ô được nhấp

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

Bạn có thể thử sử dụng:

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

điều này hoạt động với hầu hết các loại yếu tố:

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

Trong trường hợp xử lý sự kiện được ủy quyền, nơi bạn có thể có một cái gì đó như thế này:

<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>

và mã JS của bạn như vậy:

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

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

Nhiều khả năng bạn sẽ thấy rằng itemId là undefined, vì nội dung của LI được gói trong một <span>, có nghĩa là <span>có thể sẽ là mục tiêu sự kiện. Bạn có thể khắc phục điều này bằng một tấm séc nhỏ, như vậy:

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

Hoặc, nếu bạn muốn tối đa hóa khả năng đọc (và cũng tránh lặp lại các cuộc gọi gói jQuery không cần thiết):

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

Khi sử dụng phân quyền sự kiện, .is()phương thức này là vô giá để xác minh rằng mục tiêu sự kiện của bạn (trong số những thứ khác) thực sự là những gì bạn cần. Sử dụng .closest(selector)để tìm kiếm cây DOM và sử dụng .find(selector)(thường được kết hợp với .first(), như trong .find(selector).first()) để tìm kiếm nó. Bạn không cần sử dụng .first()khi sử dụng .closest(), vì nó chỉ trả về phần tử tổ tiên phù hợp đầu tiên, trong khi .find()trả về tất cả các hậu duệ phù hợp.

Sử dụng có thể Sử dụng sự kiện .on

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

Điều này hoạt động trên mức cao z-indexhơn tham số sự kiện được đề cập trong các câu trả lời ở trên:

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

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

Bằng cách này, bạn sẽ luôn có được phần idtử (trong ví dụ này li). Ngoài ra khi nhấp vào một yếu tố con của cha mẹ ..

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

Làm việc với JSFiddle tại đây .

Chỉ cần sử dụng thistài liệu tham khảo

$(this).attr("id")

hoặc là

$(this).prop("id")

this.element.attr("id") hoạt động tốt trong IE8.

Cả hai công việc này,

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

và

alert(this.id);

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

Bạn có thể sử dụng hàm để lấy id và giá trị cho mục đã thay đổi (trong ví dụ của tôi, tôi đã sử dụng thẻ Chọn.

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

Tôi đang làm việc với

Tự động hoàn thành jQuery

Tôi đã cố gắng tìm kiếm eventnhư mô tả ở trên, nhưng khi chức năng yêu cầu kích hoạt thì dường như không có sẵn. Tôi đã sử dụng this.element.attr("id")để lấy ID của phần tử thay vào đó và nó có vẻ hoạt động tốt.

Trong trường hợp Angular 7.x, bạn có thể lấy phần tử gốc và id hoặc thuộc tính của nó.

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>