ansaurus

Question

jquery - starting with element passed into function via this pointer

Answer 1

+3 A:

With jQuery, you can generally avoid inserting any javascript into your HTML at all, eg: href="javascript: ..." or href="#" onclick="...". A neater way is to write a query to target that element and apply the behaviour from there. The simplest way to target the element is to give it an ID, but you could use any method you like.

<a href="#" id="myLink">Click!</a>

and your jQuery:

$('#myLink').click(function() {
    $(this).after("<div>hello world!</div>");
});

Inside the event handling functions, this refers to the DOM element that was targeted by the event.

If you want to get a jQuery object from an element - just pass it to the constructor:

$(domElement)

You might be having issues because of the way you're calling the handler. Try changing your link to this style:

<a href="#" onclick="doSomething(this)">

Just remember to make doSomething() return false

nickf 2009-10-11 23:59:54

Thanks for the response. I suppose I could do something like that. There are going to be multiple links on the page that need to call the function, so I would have to assign a class to them or something, and attach the function to all links of that class. But, I would like to see my question answered just so I can understand jQuery more.

jkohlhepp 2009-10-12 00:13:51

oh righty... editing now...

nickf 2009-10-12 00:24:38

Changing from <a href="javascript: DoSomething(this);">Click!</a>to <a href="#" onclick="doSomething(this)">*does* work. Any idea why that makes a difference?

jkohlhepp 2009-10-12 00:36:52

using `javascript:` runs in a different context to the `on*` handlers. I suspect that if you use `href=javascript:blah(this)`, then "this" will be the `Window` object.

nickf 2009-10-12 03:43:13

Answer 2

+1 A:

Changing from <a href="javascript: DoSomething(this);">Click!</a> to <a href="#" onclick="doSomething(this)"> does work.

this is only meaningful in JavaScript functions. Event handlers like onclick are a kind of function.

javascript: pseudo-URLs are not functions. They are not executed in the context of any object on the page. They are just a string. Clicking the link is the same as typing that string into the web browser's address bar. Consequently this will give the default value window, the global object, which is always passed when there is no particular this object.

javascript: pseudo-URLs are a complete disaster and should never be used for anything (well, except bookmarklets). The onclick form is better, though you should remember to add return false; so that it doesn't follow the # link and jump to the top of the page.

(A non-link element with onclick, or a styled button may be more appropriate than a link, depending on what the Something is that DoSomething is doing.)

bobince 2009-10-12 02:18:30

Excellent info thanks.

jkohlhepp 2009-10-12 11:03:21

ansaurus

tags:

views:

answers:

jquery - starting with element passed into function via this pointer

related questions