Question: I have this function:

```
$(document).on('scroll', function(e)
{
  if (processing)
     return false;

  if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9)
  {
     processing = true;

     var resource = $('#lazyLoad').attr('href');

     $.get(resource, '', function(data)
     {
        $('#lazyLoad').remove();

        $('#content').append(data);

        step++;
        processing = false;
     });
  }
});

```

I add some html code to my page every time this function is called. But other Javascript functions are not triggered when I click on a newly added html button. So I guess the DOM-element was not porper updated. But how do I proper update the DOM-element?

My Handler looks like this:

```
$('.article_action.un_read').on('click', function(event)
{
  event.preventDefault();

  var resource = $(this).attr('href');
  var elElemente = $(this);

  $.get(resource, '', function(data)
  {
     var obj = $.parseJSON(data);

     if(obj.status == 1)
        elElemente.html('&#128213;');
     else
        elElemente.html('&#128214;');
  });
});

```

So it also uses the `on` function.

Answer: 
Try it like this :

```
$('#content').on('click', '.article_action.un_read', function(event) {
    event.preventDefault();

    var resource = $(this).attr('href');
    var elElemente = $(this);

    $.getJSON(resource, '', function(obj) {
        elElemente.html(obj.status == 1 ? '&#128213;' : '&#128214;');
    });
});

```
you need to mention the event binder declaration 

```
$(<selector>).on('click', <handler>);

```

again inside the function which appends the html.

check the sample [fiddle](http://jsfiddle.net/seelan/UzXuf/)

edit:
but first you should unbind old events inside the function which appends the html to prevent callback from multiple call.

```
$(<selector>).off();

```