Как избежать нескольких событий на одном объекте? - PullRequest
Новая
       27

Как избежать нескольких событий на одном объекте?

2 голосов
/ 01 апреля 2011

Я делаю предварительный просмотр ссылки, набранной в текстовом поле. jQuery используется для отправки обратно <div> изображений. Когда несколько изображений, я пытаюсь сделать навигацию, чтобы выбрать изображение, которое вы хотите, с помощью левой и правой клавиш.

Итак, я добавляю события в document для ввода набранных ключей. Это сделано в success моего ajax-запроса (потому что он асинхронный).

Моя проблема в том, что когда первый запрос выполнен, все в порядке. После первого события событие запускается 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() - это функция, которая прикрепляет событие к документу

1 Ответ

3 голосов
/ 01 апреля 2011

Вместо этого 

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

пожалуйста, попробуйте и используйте 

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

Хотя это не идеальный способ, это гарантирует, что перед тем, как вы прикрепите обработчик к событию в элементе, другие обработчики для того же события будут удалены.

...