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?

Why are you adding undefined as second parameter to trigger ? What's that second parameter supposed to do ? Are you confusing trigger and bind ? — Denys Séguret
– Denys Séguret, Commented Mar 20, 2013 at 9:16
That's my attempt at a callback function... I also tried wrapping it in [] as per jquery API, but also does not work — frequent
– frequent, Commented Mar 20, 2013 at 9:17
.trigger does not accept any callbacks. $input.trigger('click') triggers the click event on the $input elements, i.e. it will execute the click event handlers bound to those elements. It looks like you have bind runtest to $input, but I'm not sure what your want exactly. — Felix Kling
– Felix Kling, Commented Mar 20, 2013 at 9:17
@FelixKling: I need to click the input and after it has executed it's own handlers, I need to run a set of qunit tests (to check whether the input did what it should) — frequent
– frequent, Commented Mar 20, 2013 at 9:18

Denys Séguret · Accepted Answer · 2015-12-31 14:28:32Z

29

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

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

edited Dec 31, 2015 at 14:28

answered Mar 20, 2013 at 9:21

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

4 Comments

Felix Kling Over a year ago

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

Jared Farrish Over a year ago

@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 Over a year ago

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

vknyvz Over a year ago

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

Naren Chejara · Accepted Answer · 2015-12-18 03:27:44Z

29

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

answered Dec 18, 2015 at 3:27

Naren Chejara

1,30211 silver badges7 bronze badges

3 Comments

tobylaroni Over a year ago

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.

Md Rahatur Rahman Over a year ago

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 Over a year ago

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

msapkal · Accepted Answer · 2015-02-11 06:15:33Z

12

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

edited Feb 11, 2015 at 6:15

answered Mar 20, 2013 at 9:20

msapkal

8,3462 gold badges34 silver badges48 bronze badges

3 Comments

frequent Over a year ago

yup. thats one way. Thanks.

Seimen Over a year ago

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

Rohit Sharma Over a year ago

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

Dipesh Parmar · Accepted Answer · 2013-03-20 09:18:48Z

5

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

answered Mar 20, 2013 at 9:18

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

FVlad · Accepted Answer · 2013-03-20 09:20:44Z

2

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().

answered Mar 20, 2013 at 9:20

FVlad

3175 silver badges11 bronze badges

Comments

MarcoK · Accepted Answer · 2013-03-20 09:20:26Z

0

The Trigger doesn't have a callback function - you can better re-write your code to use the .on method.

$("body").on("click", "#click", function() {
   alert("Clicked!"); 
});

JSFiddle.

answered Mar 20, 2013 at 9:20

MarcoK

6,1202 gold badges30 silver badges40 bronze badges

Comments

Seimen · Accepted Answer · 2013-03-20 09:50:59Z

0

If you have a click handler on every input but want to do something on a specific element:

var $container = $(".ui-popup-container"),
    special = 2;

$container.on('click', 'input', function() {
    // do something for every input

    if($(this).index() == special) {
        // your "callback", e.g. the function you want to execute on input:eq2 click
        myfunction();
    }
}).find('input').eq(special).trigger('click');

edited Mar 20, 2013 at 9:50

answered Mar 20, 2013 at 9:44

Seimen

7,2942 gold badges30 silver badges42 bronze badges

Comments

realplay · Accepted Answer · 2020-04-02 18:58:34Z

0

.trigger() does not accept any callbacks. You don't need it most cases because the bound event handler is immediately executed. However, if you have an AJAX call in trigger event handler, the code from accepted answer will not work:

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

You will have to use setTimeout() like this:

$input.trigger('click');
setTimeout(function () {
    runtests();
}, 250);

Or consider using success or error callbacks for .ajax() call in .trigger() event handler.

answered Apr 2, 2020 at 18:58

realplay

2,37723 silver badges33 bronze badges

Comments

bafsar · Accepted Answer · 2021-09-19 18:20:17Z

0

Denys Séguret's logic is right. But when needed a callback function after trigger function, $.when is usable:

$.when($input.trigger("click"))
 .done(function () { runtests(); });

answered Sep 19, 2021 at 18:20

bafsar

1,1182 gold badges16 silver badges18 bronze badges

Comments

TobScada · Accepted Answer · 2021-10-28 21:02:03Z

0

Please try this :

$('#inputTxt1').change(function(e, callback1, data) {

    /*  other statement ...   */  
    
   if(typeof(callback1)==='function'){
       callback1(data);
   } 
});

$('#button2').click(function(e){
    $('#button1').trigger('change', [secondCallback, 'data to callback']);
});

function secondCallback(data){
    var result = data;
}

edited Oct 28, 2021 at 21:02

answered Oct 28, 2021 at 20:55

TobScada

317 bronze badges

2 Comments

Tyler2P Over a year ago

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

TobScada Over a year ago

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.

Collectives™ on Stack Overflow

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

10 Answers 10

4 Comments

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

4 Comments

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related