Question: ```
$('body').on('click', 'img', function () {
    $('<img class="halfsize" src="imgs/logo.png?' + Math.random() + '" alt="" />').appendTo('header');
});
$('img').on('load', function (evt) {
    console.log(this, evt);
});

```

This code work fine when page first load. But, when click img, new append to header's img not trigger the load event, why? Click event is work well.

Answer: 
The `click` works because you use the delegated form of `.on()`.

You should do the same with the image..

```
$('header').on('load','img', function( evt ){
    console.log(this, evt);
} );

```

---

**Update** Seems that image load events do not bubble up the DOM (*so you cannot handle them through delegated event handlers*)..

So you will have to manually add your handler to the dynamically added images..

```
function loadHandler(evt){
    console.log(this, evt);
}
$('body').on('click', 'img',function(){ 
    $('<img/>', {
        'class':'halfsize',
        load: loadHandler,
        alt:'',
        src: 'imgs/logo.png?'+ Math.random()
    }).appendTo('header'); 
});

$('img').on('load', loadHandler);

```
For some browsers (IE in particular), you MUST attach the onload handler BEFORE you assign the `.src` attribute. That's because some browsers will load an image immediately when you assign the `.src` attribute if the image is in the image cache. Thus, if you attach the `load` handler afterwards, the event will already have occurred and you may miss the event entirely.

The `load` event does not propagate so you cannot use delegated event handling for it.

In your case, I would suggest this code for safe, proper behavior in all browsers that attaches the load handler first:

```
$('body').on('click', 'img', function () {
    $('<img class="halfsize" alt="" />')
        .on('load', function (evt) {
            console.log(this, evt);
         })
        .attr("src", "imgs/logo.png?" + Math.random())
        .appendTo('header');
});

```