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');

```
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);

```