Mendapatkan ID dari elemen yang dipecat acara

Dalam jQuery acara.target selalu mengacu pada unsur yang memicu peristiwa, di mana event merupakan parameter yang 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 ini juga akan bekerja, tetapi itu bukan objek jQuery, jadi jika anda ingin menggunakan fungsi jQuery pada itu maka anda harus menyebutnya sebagai $(ini), misalnya:

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

Untuk referensi, coba ini! Ia bekerja!

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

Meskipun hal ini disebutkan dalam posting lain, aku ingin mengeja ini:

$(event.target).id undefined

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

acara.target.id juga memberikan atribut id.

ini.id memberikan atribut id.

dan

$(ini).id undefined.

Perbedaan, tentu saja, adalah antara jQuery benda-benda dan DOM benda-benda. "id" adalah DOM properti sehingga anda harus pada elemen DOM objek untuk menggunakannya.

(Itu tersandung saya, 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

Di mana acara.target gagal itu jatuh kembali pada acara.srcElement untuk IE. Untuk memperjelas kode di atas tidak memerlukan jQuery tetapi juga bekerja dengan jQuery.

Anda dapat menggunakan (ini) untuk referensi objek yang dipecat fungsi.

'ini' adalah DOM elemen ketika anda berada di dalam sebuah fungsi callback (dalam konteks jQuery), misalnya, yang disebut dengan klik, masing-masing, mengikat, dll. metode.

Di sini adalah di mana anda dapat mempelajari lebih lanjut: http://remysharp.com/2007/04/12/jquerys-this-demystified/

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

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

Elemen yang dipecat acara kami di acara properti

event.currentTarget

Kami mendapatkan DOM node objek yang ditetapkan event handler.

Paling bersarang node yang mulai menggelegak proses yang kita miliki di

event.target

Acara objek selalu pertama atribut event handler, contoh:

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

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

});

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

Sumber unsur sebagai objek jQuery harus diperoleh melalui

var $el = $(event.target);

Ini membuat anda sumber klik, daripada elemen yang satu-klik fungsi ditugaskan juga. Dapat berguna ketika acara klik pada objek induk MISALNYA.acara klik pada baris tabel, dan anda butuhkan sel yang diklik

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

Anda dapat mencoba untuk menggunakan:

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

Dalam kasus dilimpahkan event handler, 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 anda JS kode seperti ini:

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

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

Anda'akan lebih dari mungkin menemukan bahwa itemId undefined, sebagai isi dari LI dibungkus dalam <span>, yang berarti <span> mungkin akan menjadi event target. Anda bisa mendapatkan sekitar ini 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 memilih untuk memaksimalkan mudah dibaca (dan juga menghindari pengulangan yang tidak perlu dari jQuery pembungkus panggilan):

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

Ketika menggunakan acara delegasi,.adalah() adalah metode yang sangat berharga untuk memverifikasi bahwa acara anda target (antara lain) adalah benar-benar apa yang anda butuhkan untuk menjadi. Gunakan .terdekat(pemilih) untuk mencari DOM pohon, dan menggunakan .menemukan(pemilih) (umumnya ditambah dengan .pertama(), seperti dalam .menemukan(pemilih).pertama()) untuk pencarian bawah ini. Anda don't perlu menggunakan .pertama() ketika menggunakan .terdekat(), karena hanya mengembalikan pertama pencocokan nenek moyang elemen, sementara .menemukan() mengembalikan semua pencocokan keturunan.

ini bekerja dengan sebagian besar jenis elemen:

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

Ini bekerja pada tingkat yang lebih tinggi z-index dari acara parameter yang disebutkan di atas, jawaban:

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

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

Dengan cara ini anda akan selalu mendapatkan id (dalam contoh ini li) elemen. Juga ketika diklik pada elemen anak dari orang tua..

Penggunaan dapat Digunakan .pada acara

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

Kerja JSFiddle [di sini](http://jsfiddle.net/npvrx6sg/).

Hanya menggunakan ini referensi

$(this).attr("id")

atau

$(this).prop("id")

ini.elemen.attr("id") bekerja dengan baik di IE8.

Kedua pekerjaan ini,

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

dan

alert(this.id);

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

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

I'm bekerja dengan

jQuery Autocomplete

Saya mencoba mencari sebuah event seperti dijelaskan di atas, tetapi ketika fungsi permintaan kebakaran itu doesn't tampaknya akan tersedia. Saya menggunakan ini.elemen.attr("id") untuk mendapatkan elemen's ID sebaliknya, dan tampaknya bekerja dengan baik.