Слушатель событий не может подключиться или удалить в некоторых контекстах

Question

Я создал сценарий, который по умолчанию подключает прослушиватель событий к коллекции изображений. Когда элементы кликаются, слушатель свопит к другому событию, которое изменяет источник изображения и подталкивает идентификатор элемента к массиву, и это изменяется, если вы нажмете на обмениваемое изображение (исходный текст возвращается назад и последний элемент в массив удаляется). Существует кнопка «очистить» все изображения, установив источник по умолчанию и сбросив прослушиватель событий, но он не срабатывает надежно и иногда срабатывает с задержкой, в результате чего собирается только последний элемент в серии.

TL; DR: Событие срабатывает очень неудовлетворительно без видимых причин, и я хотел бы знать, почему это происходит и как я должен это исправить. JSFiddle и опубликованная версия доступны ниже.

Я загрузил текущую версию here, и вы можете отключить ошибку, выбрав несколько таблиц, нажав «Отмена» и снова выбрав эти кнопки. Обычно ошибка начинается со второго или третьего прохода.

У меня также есть fiddle.

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

Блоки кода:

UNSET все выбранные таблицы:

function tableClear() { 

     //alert(document.getElementsByClassName('eatPlace')[tableResEnum].src); 
     //numResTables = document.getElementsByClassName('eatPlace').src.length; 

     tableArrayLength = tableArray.length - 1; 

     for (tableResEnum = 0; tableResEnum <= tableArrayLength; tableResEnum += 1) { 

      tableSrces = tableArray[tableResEnum].src; 

      //alert(tableSrcTapped); 

      if (tableSrces === tableSrcTapped) { 
       tableArray[tableResEnum].removeEventListener('click', tableUntap); 
       tableArray[tableResEnum].addEventListener('click', tableTap); 
       tableArray[tableResEnum].src = window.location + 'resources/tableBase.svg'; 
      } /*else if() { 

      }*/ 
     } 

     resTableArray.splice(0, resTableArray.length); 
    } 

Set/отключенное конкретной таблицы:

tableUntap = function() { 
     $(this).unbind('click', tableUntap); 
     $(this).bind('click', tableTap); 
     this.setAttribute('src', 'resources/tableBase.svg'); 
     resTableArray.shift(this); 
    }; 

    tableTap = function() { 
     $(this).unbind('click', tableTap); 
     $(this).bind('click', tableUntap); 
     this.setAttribute('src', 'resources/tableTapped.svg'); 
     resTableArray.push($(this).attr('id')); 
    }; 

Преобразование элементов в классе 'eatPlace' в массив:

 $('.eatPlace').bind('click', tableTap); 

    tableList = document.getElementsByClassName('eatPlace'); 

    tableArray = Array.prototype.slice.call(tableList); 

Таблица конкретизации:

for (tableEnum = 1; tableEnum <= tableNum; tableEnum += 1) { 

     tableImg = document.createElement('IMG'); 
     tableImg.setAttribute('src', 'resources/tableBase.svg'); 
     tableImg.setAttribute('id', 'table' + tableEnum); 
     tableImg.setAttribute('class', 'eatPlace'); 
     tableImg.setAttribute('width', '15%'); 
     tableImg.setAttribute('height', '15%'); 

     $('#tableBox').append(tableImg, tableEnum); 

     if (tableEnum % 4 === 0) { 
      $('#tableBox').append("\n"); 
     } 

     if (tableEnum === tableNum) { 
      $('#tableBox').append("<div id='subbles' class='ajaxButton'>Next</div>"); 
      $('#tableBox').append("<div id='cazzles' class='ajaxButton'>Cancel</div>"); 
     } 
    } 

Answer 1

Первая ошибка заключается в освоении и таблицы стремятся раскрыть.

Когда вы нажимаете стол в свой массив, вы нажимаете его идентификатор.

resTableArray.push($(this).attr('id')); 

Он добавит идентификаторы элементов в зависимости от того, как пользователь нажимает на таблицы. Разворачивается, всегда удаляя первую таблицу. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

resTableArray.shift(this); 

Таким образом, когда пользователь щелкает таблицы 1, 2, 3. И unclicks 3, сдвиг будет удалить таблицу 1.

Позволяет исправить, удалив неиспользуемый таблицу

tableUntap = function() { 
    $(this).unbind('click', tableUntap); 
    $(this).bind('click', tableTap); 
    this.setAttribute('src', 'http://imgur.com/a7J8OJ5.png'); 
    var elementID = $(this).attr('id'); 
    var elementIndex = resTableArray.indexOf(elementID); 
    resTableArray.splice(elementIndex, 1); 
}; 

Таким образом, вы потеряли некоторые таблицы после разворота.

Ну позволяет исправить tableClear,

У вас есть массив с резьбовыми таблицами, но вы ищете в основном массиве.

function tableClear() { 

    tableLen = resTableArray.length; 

    for (var i = 0; i < tableLen; i++) { 
     var idString = "#" + resTableArray[i]; 

     var $element = $(idString); 

     $element.unbind('click', tableUntap); 
     $element.bind('click', tableTap); 
     $element.attr("src", 'http://imgur.com/a7J8OJ5.png'); 

    } 

    resTableArray = []; 
} 

Im ищет только прослушиваемые таблицы, а затем просто разворачивает их и удаляет обработчики. сценарий: http://jsfiddle.net/r9ewnxzs/

Ваша ошибка заключается в неправильном удалении по разворачивающимся элементам.