Mendapatkan ID elemen yang memecat suatu peristiwa

Apakah ada cara untuk mendapatkan ID elemen yang menyalakan suatu acara?

Saya sedang memikirkan sesuatu seperti:

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

Kecuali tentu saja bahwa var testharus berisi id "aaa", jika acara dipecat dari form pertama, dan "bbb", jika acara dipecat dari form kedua.

Di jQuery event.targetselalu merujuk ke elemen yang memicu acara, di mana eventparameter dilewatkan ke fungsi. http://api.jquery.com/category/events/event-object/

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

Perhatikan juga bahwa thisitu juga akan berfungsi, tetapi itu bukan objek jQuery, jadi jika Anda ingin menggunakan fungsi jQuery di atasnya maka Anda harus merujuknya sebagai $(this), misalnya:

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

Untuk referensi, coba ini! Berhasil!

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

Meskipun disebutkan dalam posting lain, saya ingin menjelaskan ini:

$(event.target).id tidak terdefinisi

$(event.target)[0].id memberikan atribut id.

event.target.id juga memberikan atribut id.

this.id memberikan atribut id.

dan

$(this).id tidak terdefinisi.

Perbedaannya, tentu saja, adalah antara objek jQuery dan objek DOM. "id" adalah properti DOM sehingga Anda harus berada di objek elemen DOM untuk menggunakannya.

(Ini membuatku tersandung, jadi mungkin tersandung orang lain)

Untuk semua acara, tidak terbatas hanya jQuery yang dapat Anda gunakan

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

Dimana event.targetgagal jatuh kembali event.srcElementke IE. Untuk memperjelas kode di atas tidak memerlukan jQuery tetapi juga berfungsi dengan jQuery.

Anda dapat menggunakan (this)untuk referensi objek yang memecat fungsi.

'this'adalah elemen DOM ketika Anda berada di dalam fungsi panggilan balik (dalam konteks jQuery), misalnya, dipanggil oleh metode klik, masing-masing, mengikat, dll.

Di sinilah Anda dapat mempelajari lebih lanjut: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Saya menghasilkan tabel secara dinamis dari database, menerima data dalam JSON dan memasukkannya ke dalam tabel. Setiap baris tabel mendapat unik ID, yang diperlukan untuk tindakan lebih lanjut, jadi, jika DOM diubah, Anda memerlukan pendekatan yang berbeda:

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

Elemen yang dipecat acara kita miliki di properti acara

event.currentTarget

Kami mendapatkan objek simpul DOM yang mengatur event handler.

Sebagian besar simpul bersarang yang memulai proses bubbling yang kita miliki di

event.target

Objek acara selalu atribut pertama dari pengendali acara, contoh:

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

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

});

Lebih lanjut tentang delegasi acara Anda dapat membaca di http://maciejsikora.com/standard-events-vs-event-delegation/

Elemen sumber sebagai objek jQuery harus diperoleh melalui

var $el = $(event.target);

Ini memberi Anda sumber klik, bukan elemen yang ditetapkan fungsi klik juga. Dapat berguna ketika acara klik pada objek induk EG. Acara klik pada baris tabel, dan Anda membutuhkan sel yang diklik

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

Anda dapat mencoba menggunakan:

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

ini bekerja dengan sebagian besar jenis elemen:

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

Dalam hal penangan acara yang didelegasikan, di mana Anda mungkin memiliki sesuatu seperti ini:

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

dan kode JS Anda seperti itu:

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

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

Anda kemungkinan besar akan menemukan itemId itu undefined, karena konten LI dibungkus dengan a <span>, yang berarti <span>mungkin akan menjadi target acara. Anda dapat menyiasatinya dengan cek kecil, seperti:

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

Atau, jika Anda lebih suka memaksimalkan keterbacaan (dan juga menghindari pengulangan panggilan pembungkus jQuery yang tidak perlu):

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

Saat menggunakan delegasi acara, .is()metode ini sangat berharga untuk memverifikasi bahwa target acara Anda (antara lain) sebenarnya adalah apa yang Anda inginkan. Gunakan .closest(selector)untuk mencari pohon DOM, dan gunakan .find(selector)(umumnya ditambah dengan .first(), seperti pada .find(selector).first()) untuk mencari ke bawah. Anda tidak perlu menggunakan .first()saat menggunakan .closest(), karena hanya mengembalikan elemen leluhur yang cocok pertama, sementara .find()mengembalikan semua keturunan yang cocok.

Gunakan bisa Gunakan .pada acara

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

Ini berfungsi pada z-indexparameter acara yang lebih tinggi daripada yang disebutkan dalam jawaban di atas:

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

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

Dengan cara ini Anda akan selalu mendapatkan idelemen (dalam contoh ini li). Juga ketika diklik pada elemen anak dari induk ..

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

Bekerja JSFiddle di sini .

Cukup gunakan thisreferensi

$(this).attr("id")

atau

$(this).prop("id")

this.element.attr("id") berfungsi dengan baik di IE8.

Kedua pekerjaan ini,

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

dan

alert(this.id);

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

Anda dapat menggunakan fungsi untuk mendapatkan id dan nilai untuk item yang diubah (dalam contoh saya, saya telah menggunakan tag Pilih.

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

Saya bekerja dengan

jQuery Autocomplete

Saya mencoba mencari event seperti yang dijelaskan di atas, tetapi ketika fungsi permintaan menyala sepertinya tidak tersedia. Saya digunakan this.element.attr("id")untuk mendapatkan ID elemen sebagai gantinya, dan tampaknya berfungsi dengan baik.

Dalam kasus Angular 7.x Anda bisa mendapatkan elemen asli dan id atau propertinya.

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>