الحصول على معرف العنصر الذي أطلق الحدث

https://stackoverflow.com/questions/48239

09-06-2019
|

سؤال

هل هناك أي طريقة للحصول على معرف العنصر الذي يطلق الحدث؟

أنا أفكر بشيء مثل:

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

باستثناء بالطبع أن فار test يجب أن يحتوي على المعرف "aaa", ، إذا تم إطلاق الحدث من النموذج الأول، و "bbb", ، إذا تم إطلاق الحدث من النموذج الثاني.

المحلول

في مسج event.target يشير دائمًا إلى العنصر الذي أثار الحدث، حيث event هي المعلمة التي تم تمريرها إلى الوظيفة. http://api.jquery.com/category/events/event-object/

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

لاحظ ذلك أيضًا this سيعمل أيضًا، ولكنه ليس كائن jQuery، لذا إذا كنت ترغب في استخدام دالة jQuery عليه، فيجب عليك الإشارة إليه باسم $(this), ، على سبيل المثال:

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

نصائح أخرى

كمرجع، جرب هذا!إنها تعمل!

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

على الرغم من ذكر ذلك في مشاركات أخرى، إلا أنني أردت توضيح ذلك:

$(event.target).id غير محدد

$(event.target)[0].id يعطي سمة الهوية.

event.target.id كما يعطي سمة الهوية.

this.id يعطي سمة الهوية.

$(this).id غير محدد.

الاختلافات، بالطبع، هي بين كائنات jQuery وكائنات DOM."id" هو خاصية DOM لذا يجب أن تكون على كائن عنصر DOM لاستخدامه.

(لقد تعثرت بي، لذلك ربما تعثرت بشخص آخر)

بالنسبة لجميع الأحداث، لا يقتصر الأمر على jQuery فقط الذي يمكنك استخدامه

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

أين event.target فشل فإنه يتراجع event.srcElement لشركة آي إي.لتوضيح الكود أعلاه لا يتطلب jQuery ولكنه يعمل أيضًا مع jQuery.

يمكنك استخدام (this) للإشارة إلى الكائن الذي أطلق الدالة.

'this' هو DOM عندما تكون داخل وظيفة رد الاتصال (في سياق jQuery)، على سبيل المثال، يتم استدعاؤها عن طريق النقر، أو كل، أو ربط، وما إلى ذلك.طُرق.

هنا يمكنك معرفة المزيد: http://remysharp.com/2007/04/12/jquerys-this-demystified/

أقوم بإنشاء جدول ديناميكيًا من قاعدة بيانات، واستقبل البيانات بتنسيق JSON وأضعها في جدول.كل صف جدول حصل على فريدة من نوعها ID, ، وهو أمر ضروري لمزيد من الإجراءات، لذلك، إذا تم تغيير DOM فستحتاج إلى نهج مختلف:

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

العنصر الذي أطلق الحدث الذي لدينا فيه حدث ملكية

event.currentTarget

نحن نحصل عقدة DOM الكائن الذي تم تعيين معالج الأحداث عليه.

معظم العقدة المتداخلة التي بدأت عملية الفقاعة لدينا

event.target

كائن الحدث هو دائمًا السمة الأولى لمعالج الحدث، على سبيل المثال:

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

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

});

المزيد عن تفويض الحدث يمكنك القراءة http://maciejsikora.com/standard-events-vs-event-delegation/

يجب الحصول على العنصر المصدر ككائن jQuery عبر

var $el = $(event.target);

يؤدي هذا إلى الحصول على مصدر النقرة، بدلاً من العنصر الذي تم تعيين وظيفة النقر عليه أيضًا.يمكن أن يكون مفيدًا عندما يكون حدث النقر على كائن الأصل على سبيل المثال.

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

يمكنك محاولة استخدام:

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

في حالة معالجات الأحداث المفوضة، حيث قد يكون لديك شيء مثل هذا:

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

ورمز JS الخاص بك مثل ذلك:

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

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

ستجد على الأرجح أن itemId هو undefined, ، حيث يتم تغليف محتوى LI في ملف <span>, ، والتي تعني <span> من المحتمل أن يكون هدف الحدث.يمكنك الالتفاف حول هذا من خلال شيك صغير، مثل هذا:

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

أو، إذا كنت تفضل زيادة سهولة القراءة (وأيضًا تجنب التكرار غير الضروري لاستدعاءات التفاف jQuery):

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

عند استخدام تفويض الحدث، فإن .is() الطريقة لا تقدر بثمن للتحقق من أن هدف الحدث الخاص بك (من بين أشياء أخرى) هو في الواقع ما تحتاجه.يستخدم .closest(selector) للبحث في شجرة DOM، واستخدامها .find(selector) (مقترنًا بشكل عام بـ .first(), ، كما في .find(selector).first()) للبحث عنه.لا تحتاج إلى استخدام .first() عند الاستخدام .closest(), ، لأنه يُرجع فقط عنصر السلف المطابق الأول، بينما .find() إرجاع كافة الأحفاد المتطابقة.

يمكن استخدام استخدام .on الحدث

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

العمل JSFiddle هنا.

وهذا يعمل على مستوى أعلى z-index من معلمة الحدث المذكورة في الإجابات أعلاه:

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

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

بهذه الطريقة سوف تحصل دائما على id من (في هذا المثال li) عنصر.أيضًا عند النقر على عنصر فرعي من الأصل..

this.element.attr("id") يعمل بشكل جيد في IE8.

وكلاهما يعمل،

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

alert(this.id);

مجرد استخدام this مرجع

$(this).attr("id")

أو

$(this).prop("id")

يمكنك استخدام الدالة للحصول على المعرف وقيمة العنصر الذي تم تغييره (في المثال الخاص بي، استخدمت علامة تحديد.

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

يعمل هذا مع معظم أنواع العناصر:

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

أنا أعمل مع

الإكمال التلقائي في jQuery

حاولت البحث عن event كما هو موضح أعلاه، ولكن عندما يتم تشغيل وظيفة الطلب، لا يبدو أنها متاحة.إستعملت this.element.attr("id") للحصول على معرف العنصر بدلاً من ذلك، ويبدو أنه يعمل بشكل جيد.

في حالة Angular 7.x، يمكنك الحصول على العنصر الأصلي ومعرفه أو خصائصه.

myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.log(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

لغة البرمجة:

<div class="list-item" (click)="myClickHandler($event)">...</div>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow