الحصول على معرف العنصر الذي أطلق الحدث
-
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>