Question

I currently have a jQuery function that replaces an image when clicked. For instance:

<script type="text/javascript">
    $('#test').click(function (event) {
        event.preventDefault();
        img = $('<img id="myImage" class="photo" src="newImage.jpg>');
        $("#myImage").remove().append(img);
    });

    $('#myImage').click(function (event) {
        event.preventDefault();
        alert("You clicked the image");
    });
</script>

And my HTML is as follows:

<a id="test">Click Here to Change Picture</a>

<div id="profilepic" class="fb6a">
    <img id="myImage" class="photo" src="oldImage.jpg>
</div>

So, I noticed that I “change” the picture and replace it with a new “image”, I lose the event handler associated with the new image, even if it has the same “ID.”

Answer 1

Try the live event.