jQuery click（）奇怪的行為

Question

我想做一個簡單的相冊功能。 但是，JQuery的click（）有一些奇怪的行為。

用戶單擊前進按鈕后，應顯示10張下一張圖像。 用戶單擊后退按鈕后，應顯示10張以前的圖像。

在下面的代碼中，對在我的代碼中正常工作的4行進行了注釋。 我期望JQuery click（）應該與注釋行做相同的事情，但事實並非如此。 在我前后單擊幾次后，使用JQuery click（）的代碼不起作用。 我想問代碼的問題在哪里。 謝謝。

<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

這是事件綁定的正常行為：當您調用click ，事件回調將添加到元素中， 並且不會替換現有的回調。 當您多次單擊后退和前進按鈕時，您為click事件分配了多個處理程序，現在您知道這很糟糕:)

有兩種解決方法可以解決您的問題：

在分配新事件之前使用例如$('#backward').unbind('click') ，這是對代碼的簡單修復。
僅將一個事件分配給具有相對索引的按鈕，例如$('#backward').click(function(){ changeImageList(-10);}); 。 我發現它更干凈，將在changeImageList的開頭進行簡單檢查以計算startIndex ，但是您仍然必須將光標設置為default / pointer。

jQuery click（）奇怪的行為

問題描述

1 個解決方案

解決方案1
2 已采納 2009-03-14 08:38:27

jQuery click（）奇怪的行為

問題描述

1 個解決方案

解決方案1 2 已采納 2009-03-14 08:38:27

解決方案1
2 已采納 2009-03-14 08:38:27