JQuery click() strange behavior

Question

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

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.

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.

<script type="text/javascript">
$(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<numImages && i<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 > 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 < 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);

}); 

</script>

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

Answer 1

This is the normal behaviour of event binding : when you call click , the event callback is added to the element and does not replace existing callbacks. When you click backward and forward buttons multiple times, you assign multiple handlers for the click event and now you know that this is bad :)

There are two solutions to you problem :

use eg $('#backward').unbind('click') before you assign a new event, this is the easy fix for your code.
assign only one event to the buttons with a relative index, eg $('#backward').click(function(){ changeImageList(-10);}); . I find it cleaner will a simple check at the beginning of changeImageList to calculate startIndex , but you'll still have to set the cursor to default/pointer.

JQuery click() strange behavior

Question

1 answers

solution1
2 ACCPTED 2009-03-14 08:38:27

JQuery click() strange behavior

Question

1 answers

solution1 2 ACCPTED 2009-03-14 08:38:27

solution1
2 ACCPTED 2009-03-14 08:38:27