Click event not working on images attached with rotateAnimation in JQuery
<p>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.</p>

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


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

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

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

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

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

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

<p>And here is the jquery script</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(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

        });

    });
</code></pre>

<p></p>

<p>Please advice. i am very new to JQuery</p>
