Bir etkinliği tetikleyen öğenin kimliğini alma

Bir etkinliği tetikleyen öğenin kimliğini almanın herhangi bir yolu var mı?

Şöyle bir şey düşünüyorum:

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

Tabii ki, değişken ilk formdan tetiklenirse ve olay ikinci formdan tetiklenirse test, kimliğin kimliğini içermesi dışında ."aaa""bbb"

JQuery'de event.targether zaman olayı tetikleyen öğeye atıfta bulunulur , burada eventparametre işleve iletilir. http://api.jquery.com/category/events/event-object/

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

Şunu unutmayalım ki thisbunu bir jQuery işlevini kullanmak istiyorsanız olacak ayrıca çalışma, ama öyle bir jQuery nesnesi, yani o zaman o sonuca başvurmalıdır değil $(this)örneğin:

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

Referans için şunu deneyin! İşe yarıyor!

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

Diğer yazılarda bahsedilmesine rağmen, bunu açıklamak istedim:

$(event.target).id tanımsız

$(event.target)[0].id id niteliğini verir.

event.target.id id niteliğini de verir.

this.id id niteliğini verir.

ve

$(this).id tanımsız.

Farklılıklar, elbette, jQuery nesneleri ile DOM nesneleri arasındadır. "id" bir DOM özelliğidir, bu nedenle onu kullanmak için DOM öğesi nesnesinde olmanız gerekir.

(Beni harekete geçirdi, bu yüzden muhtemelen başka birini açtı)

Sadece jQuery ile sınırlı olmayan tüm etkinlikler için kullanabilirsiniz

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

Nerede event.targetbaşarısız olursa event.srcElementIE için geri düşer . Yukarıdaki kodu netleştirmek için jQuery gerektirmez, aynı zamanda jQuery ile çalışır.

(this)İşlevi başlatan nesneye başvurmak için kullanabilirsiniz .

'this'bir DOM(jQuery bağlamında), örneğin click, each, bind, vb. yöntemlerle çağrıldığında bir geri çağırma işlevinin içindeyken öğesidir.

Daha fazla bilgi için: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Dinamik olarak bir veritabanı dışarı bir tablo oluşturmak, JSON veri almak ve bir tabloya koymak. Her tablo satırı benzersizdir ID, bu da daha fazla eylem için gereklidir, bu nedenle DOM değiştirilirse farklı bir yaklaşıma ihtiyacınız vardır:

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

Etkinlik mülkiyetine sahip olduğumuz etkinliğin tetiklendiği öğe

event.currentTarget

Olay işleyicisi ayarlanmış olan DOM düğümü nesnesini alıyoruz .

İçinde köpürme sürecine başlayan en iç içe düğüm

event.target

Olay nesnesi her zaman olay işleyicisinin ilk özelliğidir, örnek:

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

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

});

Etkinlik yetkilendirmesi hakkında daha fazla bilgi http://maciejsikora.com/standard-events-vs-event-delegation/

Bir jQuery nesnesi olarak kaynak eleman,

var $el = $(event.target);

Bu, tıklama işlevinin de atandığı öğe yerine tıklamanın kaynağını alır. Click olayı, bir EG.a click olayı tablo satırında olduğunda ve tıklanan hücreye ihtiyacınız olduğunda yararlı olabilir

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

Kullanmayı deneyebilirsiniz:

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

bu, çoğu öğe türüyle çalışır:

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

Böyle bir şeye sahip olabileceğiniz yetki verilmiş olay işleyicileri durumunda:

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

ve JS kodunuz şöyle:

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

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

undefinedLI içeriğinin a'ya sarıldığı için itemId'in büyük olasılıkla daha fazla olduğunu görürsünüz, <span>bu <span>da muhtemelen etkinlik hedefi olacaktır. Bunun gibi küçük bir çekle dolaşabilirsiniz:

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

Veya, okunabilirliği en üst düzeye çıkarmayı (ve ayrıca jQuery sarma çağrılarının gereksiz tekrarını önlemek) tercih ediyorsanız:

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

Etkinlik yetkilendirmesi kullanılırken .is(), etkinlik hedefinizin (diğer şeylerin yanı sıra) aslında olması gereken şey olduğunu doğrulamak için yöntem paha biçilmezdir. .closest(selector)DOM ağacını aramak için kullanın ve aşağı doğru aramak için .find(selector)(genellikle .first()olduğu gibi .find(selector).first()). Sen kullanımına gerek yoktur .first()kullanırken .closest()yalnızca iken ilk eşleşen atası elemanını döndürür olarak, .find()getiri tüm eşleşen kökenini.

Use can .on olayını kullan

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

Bu z-index, yukarıdaki yanıtlarda belirtilen olay parametresinden daha yüksekte çalışır :

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

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

Bu şekilde her zaman id(bu örnekte li) elemanını alacaksınız . Ayrıca üst öğenin alt öğesine tıklandığında ..

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

JSFiddle burada çalışıyor .

Sadece thisreferans kullanın

$(this).attr("id")

veya

$(this).prop("id")

this.element.attr("id") IE8'de iyi çalışıyor.

Bu çalışmaların ikisi de,

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

ve

alert(this.id);

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

Değiştirilen öğenin kimliğini ve değerini almak için işlevi kullanabilirsiniz (örneğimde bir Select etiketi kullandım.

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

İle çalışıyorum

jQuery Otomatik Tamamlama

eventYukarıda açıklandığı gibi aramaya çalıştım , ancak istek işlevi tetiklendiğinde kullanılabilir görünmüyor. Bunun this.element.attr("id")yerine öğenin kimliğini alırdım ve iyi çalışıyor gibi görünüyor.

Açısal 7.x durumunda, yerel öğeyi ve kimliğini veya özelliklerini alabilirsiniz.

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>