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: 
or you can do this,

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

```

though `live` or `on` would be the better alternative if you don't know in advance when that element is going to get added to the DOM.
In your example code you are the closing the wrapper function after the span is added to the body, if you remove the `})` line, your code should work just fine:

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

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

```

As other people have already answered with, you can chain in jQuery so you would be able to do any of these to get the same result:

```
function someFunction() {
  console.log(this);
}

// work from the span and attach a direct handler
$('<span class="test">test</span>').on('click', someFunction).appendTo('body');

// work from the body attaching direct handlers
$('body')
  .append('<span class="test">test</span>')
  .find('.test')
  .on('click', someFunction);

// work from the body attaching a delegate handler
$('body')
  .append('<span class="test">test</span>')
  .on('click', '.test', someFunction);

```