How to change the click handler of this image?

Question

I have the following HTML:

<img src='img.png' onclick='document.write("Hi there!")' />

...and the following JavaScript:

$(document).ready(function() {

    // Change the click handler
    $('img').click(function() {

        alert("Hi there!");

    });

});

What I am expecting to happen is that the click handler for the image is replaced and that clicking it will produce an alert dialog. Instead, the page content changes, as dictated by the click handler in the tag.

How can I change the click handler at runtime?

Note: Here is an interactive demo you can play with:
http://jsfiddle.net/ykmaG/

Answer 1

You need to remove the original onclick:

$('img').removeAttr('onclick').click(function() { ... });