jQuery Exif and async

I want to load image after I click link and next show Exif data. I have code like this.

<div class="row">
<div class="col-md-4 link">
    <a id="link" href="http://77.45.18.218/Szprotawa/Zdjecia/teren-aparat/DSC02040.JPG" class="img-link">DSC02040.JPG</a>
</div>
<div class="col-md-4 image"></div>
<div class="col-md-4 exif"></div>

$("a").click(function(event) {
event.preventDefault();
console.log($(this).attr("href"));
var self = $(this);
var link = $(this).attr("href");
var img = $("<img />").attr('src', link).load(function() {
    self.parent().parent().children('.image').append(img);

    $(this).exifLoad(function() {
        self.parent().parent().children('.exif').append($(this).exifAll());
    });
});});

And it is not working. Someone may look where I have error? Thanks.

Solution

You can load image like this :

       <html>
        <head>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script type="text/javascript">
            function openImage(url)
                {
                                var img = $('<img id="dynamic" />');
                    img.attr('src',url);
                    img.appendTo('.image');

                }
            </script>
        </head>
        <body> 
        <div class="row">
            this is page
        <div class="col-md-4 link">
            <a id="link" href="javascript:openImage('http://77.45.18.218/Szprotawa/Zdjecia/teren-aparat/DSC02040.JPG')" >DSC02040.JPG</a>
        </div>
<div class="col-md-4 image"></div>
<div class="col-md-4 exif"></div>
        </body>
    </html>

And than after you can load other <div class="col-md-4 exif"> in same function.

Here is jsfiddle