Why does jquery .click() work on href when adding [0]?

Question

So I had a problem where I needed a page to refresh but I couldn't use the .click() method on it because it does not work on href. I couldnt use window.location because I was trying to render a subtab which can be directly accessed due to security reasons. Then I stumbled upon this post:

https://stackoverflow.com/a/12801548/1864552

His solution works but I was hoping someone could give a good explanation on why this works.

This should be a comment on the original question, not a standalone question of its own. — Blazemonger, Oct 18 '13 at 14:57
@Blazemonger, you mean the original answer he is referring to? Someone actually did ask why it works as a comment on that question. — Smern, Oct 18 '13 at 14:58
Can you please paste your code to see if you are facing same issue or different ? — Sachin Thapa, Oct 18 '13 at 14:59

Denys Séguret · Answer 1 · 2013-10-18T15:12:36.103

5

jQuery click function triggers the event handlers that were bound with jQuery and simulates an event to try to trigger other click related handlers, but can't exactly reproduce the browser's native behavior :

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

If you add [0], you don't call jQuery's function but the standard DOM function, which perfectly works in this case.

edited Oct 18 '13 at 15:12

answered Oct 18 '13 at 14:57

Denys Séguret

372,613
87
782
758

Just to add a bit of explanation to the answer, jquery always returns an array, when you add [0] it returns the first dom element from the array. – Patsy Issa Oct 18 '13 at 15:02
1

This is incorrect. This is a special case - ``'s `click` event. jQuery does try to trigger the native DOM events when using `.event()` or `.trigger("event")`, but there are exceptions, and this is one of them. They target that specifically so the `href` isn't followed unexpectedly. – Ian Oct 18 '13 at 15:07

score 4 · Answer 2 · edited Oct 18 '13 at 14:57

4

Because using $('#element')[0] gets the DOM element, therefore you can use javascript functions for that element

edited Oct 18 '13 at 14:57

Blazemonger

90,923
26
142
180

answered Oct 18 '13 at 14:56

Anton

32,245
5
44
54

So without the [0] it returns the href itself? – JS noob Oct 18 '13 at 14:58
1

just using $('#element') would get element in a jQuery object thus allowing you to use jQuery functions @JSnoob – Anton Oct 18 '13 at 14:59
2

@JSnoob No, it would return the anchor element node, which has an href property. – Kevin B Oct 18 '13 at 15:12

score 1 · Accepted Answer · edited Oct 18 '13 at 15:46

1

jQuery's $() function returns an array with special methods like:.css() and .append(). When one of these special array-functions are called jQuery applies the operation to all elements in the array. The array is made up of DOM nodes so when we access it with the array[0] syntax we get a DOM Element which has a different set of methods.

edited Oct 18 '13 at 15:46

BoltClock

700,868
160
1,392
1,356

answered Oct 18 '13 at 15:04

0xcaff

13,085
5
47
55

1

Although StackEdit automatically inserts the "Written with StackEdit" line into new documents, we ask that you remove it from your answers before posting them here because it's unnecessary (Stack Exchange doesn't care what you use to write your posts as long as they are formatted properly) and therefore simply adds noise to your answers. It can even come off as promotion, which is frowned upon, even if you didn't actually create the tool yourself. Also see http://meta.stackexchange.com/questions/202156/written-with-stackedit – BoltClock Nov 01 '13 at 14:05

Why does jquery .click() work on href when adding [0]?

3 Answers3