How to run a callback function on a jQuery trigger("click")?

Question

I need to trigger a custom event in the callback of a trigger call, but I can't get it to work.

I tried this:

var $input = $( ".ui-popup-container" ).find( "input" ).eq(2);

function runtests () {
    console.log("clicked the input");
};
$input.trigger('click', runtests()); 

and this:

var $input = $( ".ui-popup-container" ).find( "input" ).eq(2);
$input.trigger('click', function(){
    console.log("clicked the input");
}

Neither of which works.

Question:
How do I get a callback function to run when I'm triggering a click on an element?

Solution 1

When you call trigger, the bound event handler is immediately executed, so you don't need any callback. Just use

$input.trigger('click');
runtests();

Solution 2

Yes - It is true that trigger doesn't take callback but we can pass callback as parameter.

//.trigger( eventType [, extraParameters ] )

$("#element").bind("customCall", function(e, callback){
   callback();
}
var callback = function(){alert("Hello");}
$("#element").trigger("customCall",[callback]);

Hope this will helps

Solution 3

First you need to bind the click event and then you can trigger the click event.

$input.bind('click', function() {

     console.log("clicked the input");
});

$input.trigger('click');

Solution 4

Trigger does not have callback function.

.trigger( eventType [, extraParameters ] )

Official Document

What you can do

var $input = $( ".ui-popup-container" ).find( "input" ).eq(2);

$input.on('click',function(){
   console.log("clicked the input");
});

Solution 5

You need to use bind or on to add callbacks. In your case it should look like this:

var $input = $( ".ui-popup-container" ).find( "input" ).eq(2);

function runtests () {
    console.log("clicked the input");
};

$input.bind('click', runtests);

Even shorter version for binding click is $input.click(runtests)

Then it will be called on click or you can trigger it manually with $input.trigger('click') or simply $input.click().

View more solutions

Comments

[frequent]

yup. thats one way. Thanks.

[Felix Kling]

+1 That should work fine, according to the docs: qunitjs.com/cookbook/#testing-user-actions.

[Simon]

Use .on() instead of .bind().

[Jared Farrish]

@frequent, you were getting callbacks and handlers confused, of course. If there's no asynchronous activity associated with the action, it's a handler that you trigger, whereas if there is asynchronous activity, you assign a callback to handle it's response when it occurs (or by status).

[user460114]

This does not work for me. I get a race condition unless I use setTimeout on the runtests() function in the example.

[vknyvz]

this doesn't work when you have a long js code in the second part of the code and at end an ajax call. only solution which is a ugly one but settimeout seems to work

[tobylaroni]

If you're already familiar with the convention for assigning callback functions when defining a bound event for a DOM element, this answer actually tells you how you could actually pass a dynamic callback function at the time that the event is triggered. That makes it one of the most valuable answers on this page, to me.

[Rahatur]

Agree with @tobylaroni. Not sure why this was not the accepted answer! Probably the question was specific to 'trigger' than a custom call.

[Rohit Sharma]

Question is about $input.trigger('click', function(){//code when the click function has been completed});

[Rohit Sharma]

Read more about .trigger( eventType [, extraParameters ] ).

[Tyler2P]

Could you provide more details on what the code does and how it helps the OP?

[TobScada]

Oops! I misunderstand about question. Actually I just really want to show some nested triggering. Hope this is the gift for someone who are looking for this solution. Im very sorry and thanks for your remind.