20

A function is bound to an event for many objects. One of those objects fires the event and jQuery kicks in. How do I find out who fired the event inside the JavaScript function?

I've tried using function [name](event){} and poking at event but I get "'data' is null or not an object".

Here's my code right now:

<script type="text/javascript"> $(document).ready(function() { $('.opening').bind("click", function(event) { //code to populate event.data since right now, the tags don't hold the info...they will eventually with an XHTML custom namespace event.data.building = "Student Center"; event.data.room = "Pacific Ballroom A"; event.data.s_time = "9/15/2009 8:00"; event.data.e_time = "9/15/2009 10:00"; indicatePreferenceByClick(event); }); function indicatePreferenceByClick(event) { alert("I got clicked and all I got was this alert box."); $("#left").load("../ReserveSpace/PreferenceByClick", { building: event.data.building, room: event.data.room, s_time: event.data.s_time, e_time: event.data.e_time}); }; </script>
Improve this question
1

6 Answers 6

Reset to default
4

event.currentTarget might be what you're looking for.

If you're asking about event source as in Java where target is the object that caused the event to be fired and source is the object to which the event handler was attached to, then this might be what you're looking for:

Within the event object which is passed to a handler when an event is fired, there are two objects include i.e. target and currentTarget.

  • target is the object that caused the event to be fired
  • currentTarget is the object where the handler was attached to

To show it in your code:

<script type="text/javascript"> $(document).ready(function() { $('.opening').bind("click", function(event) { // ...your code indicatePreferenceByClick(event, event.currentTarget); }); function indicatePreferenceByClick(event, eventSource) { alert("I got the event source."); console.log(eventSource); // ...your code } }); </script>

For more Event.currentTarget

Hope it helps :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Using target you can access the control that has caused the current execution/ event. Like this:

$(event.target)
Improve this answer

1 Comment

It is showing only [Object object], not the object id. How may I get it?
1

You can use the this in Jquery function, it will give you the item which has injected event.

<script type="text/javascript"> $(document).ready(function() { $('.opening').bind("click", function(event) { console.log($(this)); }); }); </script>
Improve this answer

Comments

0

Here is a working example of a complete page. The caller is logged to the console in the line console.log($caller.prop("id"));:

<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Untitled 1</title> <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function() { $('.opening').on("click", {building:"Student Center", room:"Pacific Ballroom A", s_time:"9/15/2009 8:00", e_time:"9/15/2009 10:00"}, function(event) { indicatePreferenceByClick(event); }); function indicatePreferenceByClick(event) { alert("I got clicked and all I got was this alert box."); var $caller = $(event.target); console.log($caller.prop("id")); var building = event.data.building; var room = event.data.room; var s_time = event.data.s_time; var e_time = event.data.e_time; }; }); </script> </head> <body> <div style="padding:10px"><button type="button" id="button1" class="opening">button1</button></div> <div style="padding:10px"><button type="button" id="button2" class="opening">button2</button></div> </body> </html>
Improve this answer

Comments

0

You don't need jQuery at all to get the target of an event. It's always available as the currentTarget property of the event. You can use jQuery to set up the event handler, of course, but getting the target is easily done without using that library. For example:

 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.js"></script> </head> <body> <button type="button" id="button1" class="opening">button1</button> <button type="button" id="button2" class="opening">button2</button> <script type="text/javascript"> $(document).ready(function() { $('.opening').bind("click", function(event) { indicatePreferenceByClick(event); }); }); function indicatePreferenceByClick(event) { console.log('target', event.currentTarget); } </script> </body> </html>

As for dealing with 'null' when trying to access event.data, that makes perfect sense because 'data' is not a property of a click event.

 $(document).ready(function() { $('.opening').bind("click", function(event) { // event.data is null so you can't add properties to it event.data.building = "Student Center"; // <- this will fail indicatePreferenceByClick(event); }); });

You can either add another property to the data object like so:

$(document).ready(function() { $('.opening').bind("click", function(event) { event.data = {}; event.data.building = "Student Center"; indicatePreferenceByClick(event); }); });

Or, you can pass another variable to your function:

$(document).ready(function() { $('.opening').bind("click", function(event) { var data = {}; data.building = "Student Center"; indicatePreferenceByClick(event, data); }); });
Improve this answer

Comments

0

when you attach the event to multiple objects the best way to identify which of the elements fired the event is using the this keyword. Example - 

$('.opening').bind("click", function(event) { var current = $(this); // will give you who fired the event. //code to populate event.data since right now, the tags don't hold the info...they will eventually with an XHTML custom namespace event.data.building = "Student Center"; event.data.room = "Pacific Ballroom A"; event.data.s_time = "9/15/2009 8:00"; event.data.e_time = "9/15/2009 10:00"; indicatePreferenceByClick(event); });

let me know if this helps.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.