যে ইভেন্টটি একটি ইভেন্ট চালিয়েছে তার আইডি পেয়ে

Question

কোনও ইভেন্টে আগুন লাগার উপাদানটির আইডি পাওয়ার কোনও উপায় আছে কি?

আমি এরকম কিছু ভাবছি:

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

অবশ্যই ঘটনাটি ব্যতীত যে ভ্যারটিতে testআইডি থাকা উচিত "aaa", যদি ইভেন্টটি প্রথম ফর্ম থেকে বরখাস্ত করা হয়, এবং "bbb", ইভেন্টটি যদি দ্বিতীয় ফর্ম থেকে বরখাস্ত হয়।

Comments

আপনার উদাহরণটি কিছুটা বিজোড়। আপনি 'এ' -তে একটি ক্লিক ইভেন্ট সংযুক্ত করছেন, তবে কোনও অ্যাঙ্কর নেই। এটিকে $ ('ইনপুট.টাইটেল') এ পরিবর্তন করা আপনার ক্লিকের ভবিষ্যতের পাঠকদের জন্য ক্লিক করুন (...) একটু পরিষ্কার হয়ে যাবে।

— জেসন মুর

আপনি event.target.idইভেন্ট হ্যান্ডলারটিতে এমন কোনও উপাদানকে আইডি পেতে ব্যবহার করতে পারেন যা কোনও ইভেন্ট নিক্ষেপ করেছে।

— ইলিয়াস করিম

Answer 1

JQuery এ 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");
    });
});

Comments

কি দারুন! ধন্যবাদ। বুঝতে পারিনি যে jQuery এত ভাল বিমূর্ত হয়েছে। তুমি রক! আমি মনে করি এটির (এটি) এবং (ইভেন্ট.আরগেট) এর মধ্যে এখনও পার্থক্য থাকবে - আপনি ইভেন্টটিকে বনামের সাথে আবদ্ধ করে রেখেছিলেন object

— হাফথর

দুর্ভাগ্যক্রমে, ইভেন্ট.টারাজেট তার কাস্টম বৈশিষ্ট্যগুলিতে অ্যাক্সেসের অনুমতি দেয় না। এটি করতে, আপনাকে অবশ্যই $ (এটি) .attr ("সংস্থা: জিনিসযুক্ত") ব্যবহার করতে হবে।

— জিয়ান ছয়ে

@ZianChoy - আমি পুরোপুরি নিশ্চিত করুন যে আপনি কি বলতে চাইছেন "কাস্টম বৈশিষ্ট্য" দ্বারা, কিন্তু আপনি ব্যবহার করতে পারেন $(event.target), আপনি একটি jQuery পদ্ধতি প্রয়োজন, যেমন যদি $(event.target).attr("organisation:thingy");।

— nnnnnn

আমি মনে করি এটি নোটের মত যে আপনার যদি ডোমটি চালিত করার জন্য ইভেন্ট টার্গেটের অ্যাক্সেসের প্রয়োজন হয় তবে আপনি এই জাতীয় কিছু করতে পারেন: $ (ইভেন্ট.এটারজেট) .eq (0)। তারপরে আপনি সাধারণত কোনও ডোম উপাদান দিয়ে $ (ইভেন্ট.আরগেট) .eq (0) .ফাইন্ড ('লি') এর মতো ব্যবহার করতে পারেন এমন কোনও পদ্ধতি ব্যবহার করতে পারেন।

— মুরগি

দয়া করে মনে রাখবেন, এটি: ইভেন্ট.টারাগেটটি ক্লিক করা হচ্ছে আসল আইটেম। আপনি যদি উদাহরণস্বরূপ, একটি ক্লিক ইভেন্টটিকে একটি ডিভের সাথে আবদ্ধ করেন, এবং সেই ডিভের ভিতরে একটি পি এবং এইচ 2 উপাদান থাকে - ইভেন্ট.টারাজেট এইগুলির মধ্যে একটিতে ক্লিক করলে এইচ 2 উপাদান বা পি ফিরিয়ে দেবে। "এটি" সত্যই সেই ডিভটি ফিরিয়ে দেবে যার উপর আপনি ইভেন্টটি ঝুলিয়েছিলেন, আপনি যে শিশু উপাদানটি ক্লিক করেছেন তা নির্বিশেষে।

— রব

Answer 2

রেফারেন্সের জন্য, এটি চেষ্টা করুন! এটি কাজ করে!

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

Comments

@gemma অন্য সমাধানটি আমার পক্ষে কাজ করে নি তবে এইটি করেছে। দেরি হওয়ার জন্য ধন্যবাদ

— HPWD

@ ড্লেকি এটি আমার জন্য একই, অন্য সমাধানটি আমার ফায়ারফক্স 12 এ কাজ করে নি, তবে এইটি কার্যকর করেছে। ধন্যবাদ

— লিনাক্স্যাটিকো

শীর্ষের উত্তরটি এম্বেড থাকা এসভিজিতে কোনও উপাদানটির আইডি পাওয়ার জন্য কাজ করছে বলে মনে হচ্ছে না। $(this).attr("id");আছে।

— ম্যাট ফ্লেচার

মনে রাখবেন যে আপনার ক্লিক ইভেন্টটি যদি বাচ্চাদের সাথে কোনও উপাদান নিয়ে থাকে e.targetতবে ইভেন্টটি শিশু হওয়া সত্ত্বেও ঘটনাটিকে বরখাস্ত করার জন্য সঠিক উপাদানটি thisআপনাকে দেবে, সেখানে ইভেন্টটি যে সংযুক্ত রয়েছে তার উপাদান আপনাকে দেবে।

— সাম্র্যাপ

Answer 3

যদিও এটি অন্যান্য পোস্টে উল্লেখ করা হয়েছে, আমি এটি বানানটি চেয়েছিলাম:

$(event.target).id অনির্ধারিত

$(event.target)[0].id আইডি বৈশিষ্ট্য দেয়।

event.target.id এছাড়াও আইডি বৈশিষ্ট্য দেয়।

this.id আইডি বৈশিষ্ট্য দেয়।

এবং

$(this).id অনির্ধারিত.

পার্থক্যগুলি অবশ্যই jQuery অবজেক্ট এবং DOM অবজেক্টের মধ্যে রয়েছে। "আইডি" একটি ডোম সম্পত্তি তাই এটি ব্যবহার করার জন্য আপনাকে ডোম উপাদান অবজেক্টে থাকতে হবে।

(এটি আমাকে ছিন্ন করেছে, সুতরাং এটি সম্ভবত অন্য কাউকে ছড়িয়ে দিয়েছে)

Comments

আমাকে event.target.idকিছু দেয় না!

— আর্টেক্সারেক্সে

@artaxerxe এর অর্থ আপনার ক্লিক করা উপাদানটির কোনও আইডি নেই: পি; এছাড়াও এই জাতীয় জিনিসের জন্য jquery ব্যবহার করবেন না .... পরিবর্তে ইভেন্ট জাভাস্ক্রিপ্টের বৈশিষ্ট্যগুলি ব্যবহার করুন কারণ এটি দ্রুত হয়।

— হেলবাবি

$(event.target).attr('selector');আমার জন্য পুরোপুরি কাজ।

— সৌলেস্তে

Answer 4

সমস্ত ইভেন্টের জন্য, আপনি কেবল jQuery ব্যবহার করতে পারেন তা সীমাবদ্ধ নয়

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

যেখানে event.targetব্যর্থ হয় এটি event.srcElementIE এর জন্য ফিরে আসে । উপরের কোডটি স্পষ্ট করতে jQuery প্রয়োজন হয় না তবে jQuery এর সাথেও কাজ করে।

Comments

JQuery ব্যবহার না করা মানে নীচের কোডের মতো কম রেখাগুলি চালানো হচ্ছে, যেমন উপরে দেখানো হয়েছে exact jQuery বিমূর্ত js দূরে। এটি সরাসরি জেএস উত্তর, এবং আকারটি দেখুন!

— xrDDDD

কেবল 'এই' কীওয়ার্ডটি ব্যবহার করা আরও ভাল নয় যা সর্বদা আপনাকে ইভেন্টটির মূল উপাদানগুলির বৈশিষ্ট্যে অ্যাক্সেস দেয়?

— মরফিডন

এই উত্তরটি পেতে কেবলমাত্র সমস্ত jQuery ক্র্যাপগুলি খনন করতে হয়েছিল। ধন্যবাদ। এটি আগের চেয়ে আরও প্রাসঙ্গিক: needmorejquery.com

— gromit190

দুর্দান্ত, সত্যিই আমাকে সাহায্য করেছে

— বার্ব্জ_ওয়াইওল

Answer 5

(this)ফাংশনটি নিষ্ক্রিয় করা বস্তুটি উল্লেখ করতে আপনি ব্যবহার করতে পারেন ।

'this'আপনি যখন কলব্যাক ফাংশনের অভ্যন্তরে থাকেন তখন একটি ডম উপাদান থাকে (jQuery এর প্রসঙ্গে), উদাহরণস্বরূপ, ক্লিক, প্রতিটি, বাঁধাই ইত্যাদি পদ্ধতি দ্বারা ডাকা হয়।

আপনি এখানে আরও শিখতে পারেন এখানে: http://remysharp.com/2007/04/12/jquerys-th--ysysified/

Comments

আপনার মতো কোনও ক্রিয়া থাকলে $(html).click()(এটি) এইচটিএমএল অবজেক্টটি ফিরিয়ে দেবে এবং ক্লিক করা উপাদানটি নয়

— TCHdvlp

Answer 6

আমি গতিশীলভাবে একটি ডাটাবেস তৈরি করে একটি টেবিল তৈরি করি, জেএসএনে ডেটা গ্রহণ করি এবং এটি একটি টেবিলের মধ্যে রাখি। প্রতিটি টেবিল সারি একটি অনন্য পেয়েছে ID, যা পরবর্তী ক্রিয়াকলাপগুলির জন্য প্রয়োজন, সুতরাং, যদি ডিওএম পরিবর্তন হয় তবে আপনার আলাদা পদ্ধতির প্রয়োজন:

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

Comments

ওহ হ্যাঁ, এটিই আমি খুঁজছিলাম। এটি "নতুন" চালু করার জন্য একই সাথে কাজ করে যেহেতু "প্রতিনিধি" এখন অবহেলিত। আমার কাছে ডিবি ডেটা থেকে গতিশীলভাবে চেকবাক্স তৈরি হয়েছিল, এবং অবশ্যই তাদের সকলের আলাদা আলাদা আইডি ছিল যা ক্লিক করার সময় আমার কিছু করার প্রয়োজন ছিল। আসলে কোন আইডি ক্লিক করা হয়েছিল তা পেতে আমি এই পদ্ধতিটি এখানে ব্যবহার করেছি। পুরানো স্কুল জেএসে আমি চেকবক্সের এইচটিএমএলে প্রতিটি চেকবক্স থেকে আইডি পাস করেছি, তবে jQuery ইভেন্ট হ্যান্ডলার মডেলটি দিয়ে সেভাবে এটি করতে পারি না।

— মিকাতো

Answer 7

ইভেন্টের সম্পত্তিতে আমাদের উপস্থিত থাকা উপাদানটি উপাদানটি

event.currentTarget

আমরা ডোম নোড অবজেক্টটি পাই যার উপর ইভেন্ট হ্যান্ডলার সেট করা হয়েছিল।

---

বেশিরভাগ নেস্টেড নোড যা আমাদের মধ্যে বুদবুদ প্রক্রিয়া শুরু হয়েছিল

event.target

---

ইভেন্ট অবজেক্টটি সর্বদা ইভেন্ট হ্যান্ডলারের প্রথম বৈশিষ্ট্য, উদাহরণস্বরূপ:

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

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

});

ইভেন্ট প্রতিনিধি সম্পর্কে আরও আপনি http://maciejsikora.com/standard-events-vs-event-delegation/ এ পড়তে পারেন

Answer 8

JQuery অবজেক্ট হিসাবে উত্স উপাদানটি মাধ্যমে পাওয়া উচিত

var $el = $(event.target);

ক্লিক ফাংশনটিও নির্ধারিত উপাদানটির চেয়ে এটি আপনাকে ক্লিকের উত্স দেয়। ক্লিক ইভেন্টটি যখন প্যারেন্ট অবজেক্ট EG তে থাকে তখন কার্যকর হতে পারে a টেবিল সারিতে ইভেন্ট ক্লিক করুন, এবং আপনার ক্লিক করা ঘরটি দরকার

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

Answer 9

আপনি ব্যবহার করার চেষ্টা করতে পারেন:

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

Answer 10

এটি বেশিরভাগ ধরণের উপাদানগুলির সাথে কাজ করে:

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

Answer 11

প্রতিনিধি ইভেন্ট হ্যান্ডলারের ক্ষেত্রে, আপনার কাছে এরকম কিছু থাকতে পারে:

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

এবং আপনার জেএস কোডটি এর মতো:

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

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

এলআই undefinedএর বিষয়বস্তুটি একটিতে আবৃত <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)ডিওএম ট্রি অনুসন্ধান করতে ব্যবহার করুন এবং এটি অনুসন্ধান করতে .find(selector)(সাধারণত মিলিত .first()হিসাবে .find(selector).first()) ব্যবহার করুন । ব্যবহার করার .first()সময় আপনাকে ব্যবহার করার দরকার নেই .closest(), কারণ এটি কেবল প্রথম ম্যাচের পূর্বপুরুষের উপাদানটি দেয়, যখন .find()সমস্ত মিলে যাওয়া বংশধরকে ফিরিয়ে দেয়।

Comments

দরকারী! আমি আমার ক্ষেত্রে সামঞ্জস্য করেছি কারণ আমি সবেমাত্র একটি সহজ <li id ​​= "numberID"> পেয়েছি এবং তাই আমি আইটেম আইডি = $ টার্গেট.এটার ('আইডি') ব্যবহার করেছি।

— জ্যাপেস্কু

একটি সাধারণ আইডি বৈশিষ্ট্যটি ব্যবহার সম্পর্কে কেবল সতর্কতা অবলম্বন করুন, কারণ প্রতিটি আইডি সেই পৃষ্ঠায় অনন্য হওয়া দরকার। সুতরাং যদি আপনার কোনও কারণে সেই পৃষ্ঠাটিতে দুটি মত তালিকাগুলির প্রয়োজন হয় তবে আপনি সম্ভবত নকল আইডি দিয়ে সজ্জিত হবেন এটি একটি খারাপ জিনিস। এজন্য আমি কেবল ভবিষ্যত-প্রুফিংয়ের জন্য ডেটা-আইডি ব্যবহার করার প্রবণতা রাখি।

— বিচ্ছিন্ন

Answer 12

ব্যবহার করতে পারেন

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

Answer 13

এটি z-indexউপরের উত্তরে উল্লিখিত ইভেন্ট প্যারামিটারের চেয়েও বেশি উপরে কাজ করে:

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

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

এইভাবে আপনি সর্বদা id(এই উদাহরণে li) উপাদানটি পাবেন। এছাড়াও যখন পিতামাতার একটি শিশু উপাদানটিতে ক্লিক করা হয় ..

Answer 14

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

এখানে কাজ করছেন জেএসফিডল ।

Comments

আমি মনে করি এটি কার্যকর করার জন্য এটি কিছুটা পুরানো বিকল্পের মতো

— অর্ণাস পেরেলিস

@ আরনাসপিলিস পুরানো? না, শুধু jQuery নয়।

— কেভিন বি

Answer 15

শুধু thisরেফারেন্স ব্যবহার করুন

$(this).attr("id")

অথবা

$(this).prop("id")

Comments

এটি নির্ধারিত idউপাদান থেকে বৈশিষ্ট্যটি এনেছে click()। যদি আপনাকে সেই পদ্ধতিতে আরও ডেটা স্থানান্তর data-some-id="<?php $someId; ?>"করতে হয় তবে আপনার এটি দরকার এবং তারপরে এটি পুনরুদ্ধার করার জন্য আপনি `$ (এটি) .ডাটা (" কিছু-আইডি ") করতে পারেন।

— রোল্যান্ড 16

Answer 16

this.element.attr("id") আইই 8 তে কাজ করে।

Answer 17

এই উভয় কাজ,

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

এবং

alert(this.id);

Answer 18

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

Comments

@ ম্যানুয়েলম্যানহার্ট এই উত্তরের কোনও লিঙ্ক নেই, এটি কেবলমাত্র উত্তর, কেবলমাত্র লিঙ্ক-উত্তর নয়

— বার্বসান

Answer 19

আপনি পরিবর্তিত আইটেমটির আইডি এবং মান পেতে ফাংশনটি ব্যবহার করতে পারেন (আমার উদাহরণস্বরূপ, আমি একটি নির্বাচন ট্যাগ ব্যবহার করেছি।

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

Answer 20

আমি সাথে কাজ করছি

jQuery স্বতঃসিদ্ধ

আমি eventউপরে বর্ণিত হিসাবে সন্ধানের চেষ্টা করেছি , তবে যখন অনুরোধটির ফাংশনটি জ্বলে উঠবে তখন এটি উপলব্ধ বলে মনে হয় না। পরিবর্তে আমি this.element.attr("id")উপাদানটির আইডি পেয়েছি এবং এটি ঠিকঠাক কাজ করছে বলে মনে হচ্ছে।

Answer 21

কৌণিক 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>