jQuery simulate click

Question

I want to trigger a function when the page is loaded. There are many ways to do this. However, when I add $('#button').click in front of my function, then the getType function is not recognized. For example:

$('#button').click(function getType(id) {
    //...some code
});

error: getType is not defined

What am I doing wrong?

Just to clarify, in this case I cannot use an anonymous function. Also, it does not matter to me whether I use $(document).ready or $(window).bind("load", function(), but using these I still get the “getType is not defined” error.

Similar to http://stackoverflow.com/questions/773639/how-can-i-simulate-an-anchor-click-via-jquery IMO the answer is `$("#example")[0].click();` — PJ Brunet, Feb 03 '17 at 16:10

score 28 · Accepted Answer · edited Aug 30 '18 at 06:35

28

You either have to make your function anonymous:

$('#button').click(function() {
    //...some code
});

Or pass the function itself:

function getType() {
    //...some code
}

$('#button').click(getType);

If you just want to trigger a click, call .click():

$('#button').click();

Also, your id parameter won't be the element's id. It'll be the click event object. To get the element's id, you can refer to the clicked element using this:

$('#button').click(function() {
    var id = this.id;
});

I suggest you read a few JavaScript and jQuery tutorials (in that order).

edited Aug 30 '18 at 06:35

MD. Khairul Basar

4,976
14
41
59

answered Mar 09 '13 at 21:48

Blender

289,723
53
439
496

I think the first param of `click` is an instance of `eventObject`. So, id will always be the instance, not the `id`. – Gabriel Santos Mar 09 '13 at 21:53
@GabrielSantos: Yep, that's what I wrote at the end of my answer. – Blender Mar 09 '13 at 21:53
It is confusing explain at the end, when you use id from begin ;) – Gabriel Santos Mar 09 '13 at 21:55
1

@GabrielSantos: Yeah, I agree. I've removed it. – Blender Mar 09 '13 at 21:56
Thanks all for the help, I got it! – Bwyss Mar 10 '13 at 08:07
+1 Thanks and i enthusiastic to know difference between trigger('click') and click() and found this http://stackoverflow.com/questions/9666471/jquery-advantages-differences-in-trigger-vs-click – QMaster Aug 27 '14 at 18:48

score 6 · Answer 2 · answered Mar 09 '13 at 21:49

You are using the inline notation so, you should use an anonymous function (no name function)

your code should be:

$('#button').click(function() {
      // do your stuff here
    }
);

Beside that, as the titles says, you need to simulate a click event, right ? if so you better use something like:

$('#button').on('click', function() {
  alert($(this).text());
});
// somewhere when you want to simulate the click you call the trigger function
$('#button').trigger('click');

see documentation here

This answer addresses the question in the title. The title is what made Google think this page had the answer to my question, which it did thanks to @Abu Romaissae. — Jason, Aug 01 '20 at 03:03

Gabriel Santos · Answer 3 · 2013-03-09T21:57:05.280

$('#button').click(function getType(id) {
    //...some code
});

Should be:

$('#button').click(function() {
        [...] code here
    }
);

function() { } is a callback with what code have to do when I click some element.

If you have the getType function, you can pass it as a callback:

$('#button').click(getType);

If you want to trigger a funcion, when page load, you can do this:

$('#button').trigger('click');

Or

function getType() {
    [...] code here
}

getType();

score 2 · Answer 4 · answered Jul 24 '14 at 15:49

Use .trigger( event [, extraParameters ] ) on the element.

extraParameters
Type: Array or PlainObject
Additional parameters to pass along to the event handler.

The added benefit is that you can pass data to the event handler, whereas if you use .click(), you cannot assign data to the object.

$("#target").trigger('click');

If you're looking to use the extraParameters:

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

score 1 · Answer 5 · answered Mar 09 '13 at 21:51

The .click() method requires a callback function. So you can do something like this instead:

//Define your function somewhere else
function getType(id) {
    //...some code
}

$('#button').click(function() {
    getType($(this).attr('id')); //Execute it when its clicked.
});

score 0 · Answer 6 · answered Mar 09 '13 at 21:48

0

Try this, the id can not be passed the way you do:

$('#button').click(function() {
    var id = this.id;
    //...some code
});

answered Mar 09 '13 at 21:48

Niels

48,601
4
62
81

jQuery simulate click

6 Answers6

Linked

Related