JQuery에서 rotateAnimation과 연결된 이미지에서 클릭 이벤트가 작동하지 않습니다.

Question

Jquery "rotateAnimation"을 사용하여 이미지를 회전하고 각 이미지 클릭시 경고 메시지를 표시하는 기능을 추가하려고합니다. 경고 메시지는 jquery rotateAnimation 메서드를 사용하여 회전 한 이미지를 제외한 모든 이미지에서 작동합니다. 여기

<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> 

그리고

은 JQuery와 스크립트

<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 

     }); 

    }); 

하시기 바랍니다 조언을합니다. 나는 아주 새로운 JQuery와

Answer 1

에 plugin you're using 실제로 <img>을 파괴하고 그래서, 무엇을하고있어 (IE 또는 <rvml:image> 요소)에 대한 <canvas> 사용하지만 원래 <img> 두 가지의 ID와 <span>의 요소를 포장하지 오전 이 같은 attribute-starts-with selector와 .live() 핸들러를 사용할 수 있습니다

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