Apakah ada cara untuk mendapatkan ID dari elemen yang kebakaran sebuah acara?
I'm memikirkan sesuatu seperti:
<html>
<head>
<script type="text/javascript" src="starterkit/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
var test = caller.id;
alert(test.val());
});
});
</script>
</head>
<body>
<form class="item" id="aaa">
<input class="title"></input>
</form>
<form class="item" id="bbb">
<input class="title"></input>
</form>
</body>
</html>
Kecuali tentu saja bahwa var test
harus berisi id "aaa"
, jika acara ini dipecat dari bentuk pertama, dan "a"
, jika acara ini dipecat dari kedua bentuk.
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");
});
});
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);
});
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 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..
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](
).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.