Question

I have the following html code, in which if I click the image button ‘button.png’, the corresponding image ‘image.png’ will show in the ‘content’ div:

HTML:

<div>
  <a href="/static/images/image.png" class="content">
      <img src="/static/images/button.png" class="button">
  </a>
</div>
<div id="content"></div>

jQuery:

$(document).ready(function() {
  $('a.content').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
      return false
  });

However, I couldn’t get the image displayed correctly (a mess of codes show up). Please help. Thanks.
});

Answer 1

The load method will try to load the given URL as HTML and insert that HTML into the selected node. A PNG is not HTML, so load will not work. Instead, add an img element with an appropriate src. That might be implemented like so:

$('<img>').attr('src', url).appendTo('#content');

You may want to clear the content div before appending, however, so images do not build up. For that, you can use empty.