Click event not working on images attached with rotateAnimation in JQuery

Question

Hi, I am trying to rotate an image with Jquery "rotateAnimation" and trying to add a function to show an alert message on click of each image. The alert message is working for all the image except those i have rotated using the jquery rotateAnimation methode.

    <div style="position:absolute;top:180px;left:165px;">
    <img id="image10" src="Green.png"  class="clFree" alt="1" border="0">
    <img id="image11" src="Green.png"  class="clFree" alt="2" border="0">
    <img id="image12" src="Green.png"  class="clFree" alt="3" border="0">
    <img id="image13" src="Green.png"  class="clFree" alt="4" border="0">
    </div>


    <div style="position:absolute;top:178px;left:125px;"><img id="image31"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:175px;left:100px;"><img id="image30"   src="Green.png" alt="first" border="0"></div>

    <div style="position:absolute;top:172px;left:75px;"><img id="image29"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:168px;left:50px;"><img id="image28"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:160px;left:22px;"><img id="image27"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:145px;left:-2px;"><img id="image26"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:120px;left:-15px;"><img id="image25"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:95px;left:-22px;"><img id="image24"   src="Green.png" alt="first" border="0"></div>

    <div title="center" style="position:absolute;top:68px;left:-25px;"><img id="image23" class="clNotFree"   src="Red.png" alt="center" border="0"></div>

    <div style="position:absolute;top:40px;left:-22px;"><img id="image22"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:15px;left:-15px;"><img id="image21"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:-6px;left:2px;"><img id="image"   src="Green.png" alt="first" border="0"></div>

    <div style="position:absolute;top:-20px;left:25px;"><img id="image1" src="Green.png" title="fff" alt="f1" border="0"></div>
    <div style="position:absolute;top:-30px;left:50px;"><img id="image2" src="Green.png" alt="2" border="0"></div>
    <div style="position:absolute;top:-35px;left:75px;"><img id="image3" src="Green.png" alt="3" border="0"></div>
    <div style="position:absolute;top:-35px;left:100px;"><img id="image4" src="Green.png" alt="4" border="0"></div>
    <div style="position:absolute;top:-35px;left:125px;"><img id="image5" src="Green.png" alt="5" border="0"></div>
    <div style="position:absolute;top:-35px;left:150px;"><img id="image6" src="Green.png" alt="6" border="0"></div>
    <div style="position:absolute;top:-35px;left:175px;"><img id="image7" src="Green.png" alt="7" border="0"></div>
    <div style="position:absolute;top:-32px;left:212px;"><img id="image8" src="Green.png" alt="33" border="0"></div>
    <div style="position:absolute;top:-32px;left:235px;"><img id="image9" src="Green.png" alt="34" border="0"></div>

    <div style="position:absolute;top:-32px;left:235px;">
    <img id="image10" src="Green.png" alt="1" border="0">
    <img id="image11" src="Green.png" alt="2" border="0">
    <img id="image12" src="Green.png" alt="3" border="0">
    <img id="image13" src="Green.png" alt="4" border="0">
    </div>

And here is the jquery script

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#image').rotateAnimation({angle:-35});
        $('#image1').rotateAnimation({angle:-25});
        $('#image2').rotateAnimation({angle:-16});
        $('#image3').rotateAnimation({angle:-14});
        $('#image4').rotateAnimation({angle:-12});
        $('#image5').rotateAnimation({angle:-10});
        $('#image6').rotateAnimation({angle:-8});
        $('#image7').rotateAnimation({angle:-6});

        $('#image21').rotateAnimation({angle:-60});
        $('#image22').rotateAnimation({angle:-80});

        $('#image23').rotateAnimation({angle:-90});

        $('#image24').rotateAnimation({angle:-100});
        $('#image25').rotateAnimation({angle:-110});
        $('#image26').rotateAnimation({angle:-130});
        $('#image27').rotateAnimation({angle:-150});
        $('#image28').rotateAnimation({angle:-160});
        $('#image29').rotateAnimation({angle:-170});
        $('#image30').rotateAnimation({angle:-175});
        $('#image31').rotateAnimation({angle:-180});

        $("img:not([title])").each(function() {
         $(this).attr("title", $(this).attr("alt"))
        })

        $("img").live("click",function(e) {

        // Methode to alert image ID

        });

    });

Please advice. i am very new to JQuery

Answer 1

The plugin you're using actually destroys the <img> and uses <canvas> for what it's doing (or <rvml:image> element for IE) but it does wrap the element in a <span> with the ID of the original <img> both ways, so you can use .live() handler with an attribute-starts-with selector like this:

$("span[id^='image']").live("click", function() {
  alert(this.id);
});