jQuery beginner - referencing HTML object passed into JS function

Question

It seems like there should be a better way to code this:

HTML snippet:

<label onclick="addstuff(this)" id="label_id">Hello</label>

JS/jQuery snippet:

function addstuff(field){
    $('#'+field.id).before('<div>Just a random element being added…</div>');
}

I dislike that I am referencing my field in the Javascript by $('#'+field.id) when the field is already being passed in. It seems like there should be another way to reference field in jQuery using the field object that is passed in, which in my mind should be more efficient, but I'm not having any luck figuring it out. Any advice is greatly appreciated.

Answer 1

This is an easier way.

$('#label_id').click(addstuff);

function addstuff(){
    $(this).before('<div>Just a random element being added…</div>');
}

this refers to the label in the event handler function. You can also use the passed in event object in this instance. The event object is implicitly passed to the function as the argument to the first parameter

function addstuff(event){
    $(event.target).before('<div>Just a random element being added…</div>');
}

You could also use an anonymous function inline

$('#label_id').click(function (){
    $(this).before('<div>Just a random element being added…</div>');
});

but if you want to use the function in more than one location, I would stick to the named function. It also helps when you're debugging, as you get the name of the function when you step through.

You must bind the event handler to the element after it has been loaded into the DOM. Do this by either putting your code at the bottom of the page after the markup, or by using

$(document).ready(function() { /* code here */ });

Answer 2

try "this":

function addstuff(field){
    $(this).before('<div>Just a random element being added…</div>');
}

a jquery magic variable.

Answer 3

Just do:

$(function() {
   $('#label_id').click(function() {
       $(this).before('<div>Just a random element being added…</div>');
   });
});

This attaches a click handler to the element with ID label_id. Inside the anonymous function you can access the matched element with the normal Javascript this. To get the jQuery object, it is wrapped in $(this). In a normal setup $ refers always to the jQuery object.

The nice thing with jQuery is that you don't have to use the onEvent handlers in the HTML code. That means your HTML just looks like this:

<label id="label_id">Hello</label>

The Javascript code can be anywhere on your page inside <script type="text/javascript"></script> tags.

The "special syntax" $(function(){ /* code here */ }) makes sure, that the code inside the function is only executed when the whole DOM tree is loaded. So it guarantees that the every element is available.

How jQuery works and Getting started with jQuery should get you started ;)