Uzyskanie identyfikatora elementu, który wywołał zdarzenie

Dla odniesienia, spróbuj tego! To działa!

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

Choć jest to wspomniane w innych postach, chciałem to przeliterować:

$(event.target).id is undefined

$(event.target)[0].id daje atrybut id.

event.target.id daje również atrybut id.

this.id daje atrybut id.

I

$(this).id jest nieokreślona.

Różnice dotyczą oczywiście obiektów jQuery i DOM. "id" jest właściwością DOM, więc musisz być na obiekcie elementu DOM, aby z niej korzystać.

(potknął mnie, więc prawdopodobnie potknął się ktoś inny)

Dla wszystkich zdarzeń, nie ograniczając się tylko do jQuery można użyć

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

Gdzie event.target zawodzi to wraca na event.srcElement dla IE. Aby wyjaśnić powyższy kod nie wymaga jQuery, ale działa również z jQuery.

Możesz użyć (this), aby odwołać się do obiektu, który uruchomił funkcję.

'this' jest elementem DOM , gdy znajdujesz się wewnątrz funkcji zwrotnej (w kontekście jQuery), na przykład wywołanej przez click, each, bind, itp. metody.

Tutaj możesz dowiedzieć się więcej: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Generuję tabelę dynamicznie z bazy danych, odbieram dane w JSON i umieszczam je w tabeli. Każdy wiersz tabeli ma unikalny ID, który jest potrzebny do dalszych działań, więc jeśli dom zostanie zmieniony, potrzebujesz innego podejścia:

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

Element, którego wywołane zdarzenie mamy w event właściwość

event.currentTarget

Otrzymujemy węzeł DOM Obiekt, na którym ustawiono obsługę zdarzenia.

Większość zagnieżdżonych węzłów, które rozpoczęły proces bulgotania mamy w

event.target

Obiekt Event jest zawsze pierwszym atrybutem obsługi zdarzenia, przykład:

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

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

});

Więcej o delegowaniu wydarzeń można przeczytać w http://maciejsikora.com/standard-events-vs-event-delegation/

Element źródłowy jako obiekt jQuery należy uzyskać poprzez

var $el = $(event.target);

Dzięki temu uzyskasz źródło kliknięcia, a nie element przypisany funkcji kliknięcia. Może być użyteczne, gdy zdarzenie click znajduje się na obiekcie nadrzędnym Np.Zdarzenie kliknięcia w wierszu tabeli i potrzebujesz komórki, która została kliknięta

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

Możesz spróbować użyć:

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

W przypadku delegowanych procedur obsługi zdarzeń, gdzie możesz mieć coś takiego:

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

A Twój kod JS Tak:

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

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

Najprawdopodobniej okaże się, że itemId jest undefined, ponieważ zawartość li jest owinięta <span>, co oznacza, że <span> będzie prawdopodobnie celem zdarzenia. Można to obejść małym czekiem, jak Tak:

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

Lub, jeśli wolisz zmaksymalizować czytelność (a także uniknąć niepotrzebnego powtarzania zawijania jQuery wywołania):

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

Podczas korzystania z delegowania zdarzeń, metoda .is() jest nieoceniona do sprawdzenia, czy twój cel zdarzenia (między innymi) jest rzeczywiście tym, czym go potrzebujesz. Użyj .closest(selector), aby przeszukać w górę drzewa DOM, i użyj .find(selector) (ogólnie w połączeniu z .first(), jak w .find(selector).first()), aby przeszukać w dół. Nie musisz używać .first() podczas używania .closest(), ponieważ zwraca tylko pierwszy pasujący element przodka, podczas gdy .find() zwraca wszystkie pasujące potomkinie.

Można użyć.on event

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

Działa JSFiddle Tutaj .

To działa na wyższym z-index niż parametr zdarzenia wymieniony w powyższych odpowiedziach:

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

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

W ten sposób zawsze otrzymasz id elementu (w tym przykładzie li). Również po kliknięciu na element potomny rodzica..

this.element.attr("id") działa dobrze w IE8.

Obie te prace,

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

I

alert(this.id);

Wystarczy użyć this referencji

$(this).attr("id")

Lub

$(this).prop("id")

Możesz użyć funkcji, aby uzyskać identyfikator i wartość dla zmienionego elementu (w moim przykładzie użyłem znacznika Select.

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