jQuery - Calling .trigger('click') vs .click()

Question

In jQuery what is the better way to trigger an event such as click? Using the .trigger(\'click\') function or calling .click()?

I have alwa

Answer 1

One caveat to be aware of when using the jQuery method is that, in addition to being a jQuery method, .click() is also a DOM Level 2 native JavaScript method that can be called on HTML elements, such as <button> elements.

One place where this can become confusing is if you have a selector like this:

$("#element")[0].click();

There, you are actually calling the method on the DOM element. For instance, if you tried

$("#element")[0].trigger('click');

you would get an error that the element has no trigger method defined.

Be aware that $('#element')[0].click(); won't work in Safari, on certain elements. You will need to use a workaround.

Answer 2

If you're using .trigger() you have the advantage of being able to pass additional parameters, whereas .click() must be called without any.

Taken from the documentation:

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

'Custom' and 'Event' are being passed to the event handler as param1 and param2 respectively

Besides that, the .click() is unlike other functions that implement get / set based on the number of arguments, because it implements trigger / set instead. Using a dedicated .trigger(), to me, is more logical.