Question

我正在预览文本框中输入的链接。 jQuery用于在预览<div>中发回图片。当多张图片时，我正在尝试使用左右键进行导航以选择所需的图片。

所以我将事件添加到document以捕获键入的键。这是在我的ajax请求的success中完成的（因为它是异步的）。

我的问题是第一次请求完成后一切正常。第一次之后，事件被触发2次，然后3次;每次请求后再增加一次。

我试图取消绑定，但它没有效果。

代码：

$.ajax ({
            type: "POST",
            url: "curl.php",
            data: {"lien" : lien},
            async: true,
            success: function(data) {
                console.log(data);
                $("#result").html("");
                if(data && data != ""){
                var images = jQuery.parseJSON(data);
                $("#result").html("<img src='"+images[0].nom+"' />");
                console.log("Nombre d'images : "+images.length);
                if(nav){
                    $(document).unbind('keydown');
                    console.log('détruit');
                }
                function nav() {
            $(document).bind('keydown', function(e){    
              switch(e.which)
                {case 37:
                    if(imagePosition>0){imagePosition--;}else{imagePosition = 0;};
                    console.log(imagePosition);
                    $("#result").html("<img src='"+images[imagePosition].nom+"' />");
                    return false;
                 break; 
                 case 39:
                    if(imagePosition<(images.length-1)){imagePosition++;}else{imagePosition = (images.length-1)  };
                    console.log(imagePosition);
                    $("#result").html("<img src='"+images[imagePosition].nom+"' />");
                    return false;
                 break;      
                 }   
                }); 
            }//fin de nav
                nav();
                }

            }
     })

imagePosition是在返回的数组中选择图片的编号。
image是包含所收集图片链接的数组。
nav()是将事件附加到文档

Answer 1

而不是这个

$(document).bind('keydown', function(e){

请尝试使用

$(document).unbind('keydown').bind('keydown', function(e){

虽然这不是理想的方法，但这样可以保证在将处理程序附加到元素上的事件之前，会删除同一事件的其他处理程序。

如何避免一个对象上的多个事件？

代码：

1 个答案: