Question: I am trying to add an element to the DOM, and then working with this element, once clicked. However, I don't think the function below registers because this is a self invoking function (located at the end of the HTML), and is run only at the beginning.

```
 (function (){
    $('body').append('<span class="test">test</span>');
})

 $('.test').click(function(){
     console.log(this);
 });

})();

```

the click event handler is not working.

Answer: 
Since you're element is dynamically appended you can use `on()` or chain the `click()` event.

```
//Using on()

$('body').on('click', '.test', function(){
    // Bla
});

//Chaining click()

$('<span class="test">test</span>').click(function(){
    // Bla
}).appendTo('body');

```
Change this - 

```
$('.test').click(function()
{
    console.log(this);
});

```

to this - 

```
$('.test').live('click', function()
{
    console.log(this);
});

```

[live](http://api.jquery.com/live/) documentation.

**EDIT**

As of jquery 1.7, `live` has been deprecated. Use `on` instead - 

```
$('body').on('click', '.test', function()
{
    console.log(this);
});

```

[on](http://api.jquery.com/on/) documentation.

[jsFiddle](http://jsfiddle.net/DfRhq/1/) demo.

Remember, if you want to bind event handlers to dynamically generated DOM elements then you need to use either `live`(deprecated) or `on`.