Using a named callback (in jquery)

I am pretty new to JS.

I am trying to get a named call back function to work correctly with jquery, but I think the problem is a general JS problem, and not jquery specific.

Here is an example of what I am trying to do:


function my_callback(event)
{
  event.doSomething();
}


$('#my_element').on('click', my_callback(event));

What is the correct way to do this? This gives this error: ReferenceError: event is not defined.
But if I just do something like this, it will work:

$('#my_element').on('click', function (event) {
	
  $(this).text(
    event.doSomething();
  );
});

But I want my callback to be re-usable elsewhere.

When you pass a function as argument (callback because functions in js are first class objects) you can passed them anomymous or with name.I’ ll give an example:
First pass with name:

function my_callback(event)
{
  $(this).text(event.target);
}

$('#my_element').on('click', my_callback);

At this example I pass the my_callback function definition ONLY with itsname (without paranthesis) and the on(click) function execute callback.

Second its your example:

$('#my_element').on('click', function (event) {
	
  $(this).text(event.target);
  
});

In this example we create a function ‘on the air’ as anonymous and the when we clicked at the element then we firing the callback function

2 Likes

Thank you.

I was able to make my code work by removing the event argument to just be:

function my_callback(event)
{
  $(this).text(event.target);
}

$('#my_element').on('click', my_callback);

as you posted. But I am not sure how this works - it does not look like I am passing the ‘event’ argument to ‘my_callback’, so I am not sure how ‘my_callback’ has access to it. I did not receive the error ReferenceError: event is not defined and my code still worked.

If I add another argument to the callback function I again receive the error ReferenceError: event is not defined:

function my_callback(event, stringToLog)
{
  console.log(stringToLog);
  $(this).text(event.target);
}

$('#my_element').on('click', my_callback('hello world');

Is there possibly something special about the event argument that I am overlooking?

The jQuery documentation?

https://api.jquery.com/on/

If a data argument is provided to .on() and is not null or undefined, it is passed to the handler in the event.data property each time an event is triggered. The data argument can be any type, but if a string is used the selector must either be provided or explicitly passed as null so that the data is not mistaken for a selector. Best practice is to use a plain object so that multiple values can be passed as properties.

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );
1 Like

I am still not sure how things are working after reading the doc. I’m still having trouble passing arguments along with the event to the callback.

Can you show me how to pass BOTH the event as an argument and another argument to ‘my_callback’?

Something like this:

function my_callback(event, stringToLog)
{
  console.log(stringToLog);
  $(this).text(event.target);
}

$('#my_element').on('click', my_callback(event, 'hello world');

I tried this, trying to follow the example you posted:

function my_callback(event)
{
  console.log(event.data.stringToLog);
  $(this).text(event.target);
}

$('#my_element').on('click', { stringToLog: 'text' }, my_callback);

I forgot to mention in my post that the last code that I tried did not work.

Sorry, but “did not work” isn’t much to go on.
What error message(s) did you get in your browsers dev tools console?

I made a mistake in my code (which is not as simple as above) that I found that prevented it from working. I was able to get things working. Thanks for your help.

But when it failed it actually failed silently in my setup, otherwise I would have included the error in my post. I thought it was an obvious syntactic error causing it so someone more experienced with JS could point it out right away.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.