JQuery click() strange behavior
<p>I want to make a simple photo gallery function. However, there are some strange behavior of JQuery's click().  </p>

<p>After the user clicks the forward button, 10 next images should be shown. After the user clicks the backward button, 10 previous images should be shown.</p>

<p>In the following code, 4 lines which works fine in my code are commented. I expect the JQuery click() should do the same thing as the commented lines, but it doesn't. Code using JQuery click() doesn't work after I click backward and forward several times. I want to ask where's the problem of the code. Thank you.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() { 

var numImages = imagesObj.images.image.length;
var imagePath = "images/";
var currentIndex = 0;


function changeImageList(startIndex){

    var imageIndex = 0;
    $("#imagesList img").css("display","none");
    for (var i=startIndex; i&lt;numImages &amp;&amp; i&lt;startIndex + 10; i++)
    {
     var imageId = "image" + imageIndex;
     var image = imagesObj.images.image[i];

     $("#" + imageId).attr("src",imagePath + image.imageurl).css("display","");

     imageIndex++;
    }

    currentIndex = startIndex;
    if (numImages &gt; currentIndex+10){
     $('#forward').css("cursor","pointer");
     //document.getElementById("forward").onclick = function(){changeImageList(currentIndex+10);};
     $('#forward').click(function(){  changeImageList(currentIndex+10);});
    }else{
     $('#forward').css("cursor","default");
     //document.getElementById("forward").onclick = function(){};
     $('#forward').click(function(){});
    }

    if (currentIndex &lt; 10){
     $('#backward').css("cursor","default");
     //document.getElementById("backward").onclick = function(){};
     $('#backward').click(function(){});
    }else{
     $('#backward').css("cursor","pointer");
     //document.getElementById("backward").onclick = function(){changeImageList(currentIndex-10);};
     $('#backward').click(function(){changeImageList(currentIndex-10);});

    }
}

    changeImageList(0);

}); 

&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;table border="0" cellpadding="0" cellspacing="0"&gt;
      &lt;tr&gt;
        &lt;td align="center"&gt;&lt;img id="backward" src="images/lft_arrow.gif" alt="" width="39" height="44" /&gt;&lt;/td&gt;
        &lt;td id="imagesList" align="center"&gt;
        &lt;img id="image0" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;img id="image1" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;img id="image2" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;img id="image3" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;img id="image4" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;img id="image5" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;img id="image6" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;img id="image7" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;img id="image8" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;img id="image9" width="77" style="display:none; cursor:pointer" /&gt;
        &lt;/td&gt;
        &lt;td align="center"&gt;&lt;img id="forward" src="images/rgt_arrow.gif" alt="" width="39" height="44" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
&lt;/body&gt;
</code></pre>
