Javascript-форум - Изменить логику скрипта. js jq

Здравствуйте друзья! Есть скрипт отлавливающий правый клик мыши по ссылкам с классом(.а). Скрипт работает прекрасно! Но логика заключается в том, что он после загрузки страницы начинает циклом искать все ссылки, и далее из них формирует массив, который передает в функцию отвечающую за отлавливание события rightclick. Проблема заключается в том, что он в начале один раз получает массив ссылок и работает только с ним, то есть если я поменяю местами ссылки(имеющие определенные атрибуты) или добавлю новые, скрипт не работает или работает со старыми значениями атрибутов.

Вопрос: как переписать инициализацию скрипта, чтобы он работал на всех ссылках с классом(.а) но брал значения атрибутов не из кэша в массиве сформированном после загрузки страницы, а в реальном времени?

(function() {
        // получаем все ссылки
        var taskItems = document.querySelectorAll(".a");

        // кладем в массив и вызываем саму функцию
        for (var i = 0, len = taskItems.length; i < len; i++) {
            var taskItem = taskItems[i];
            contextMenuListener(taskItem);
        }

  function contextMenuListener(el) {
      el.addEventListener( "contextmenu", function(event) {
          event = event || window.event;
          event.preventDefault ? event.preventDefault() : event.returnValue = false;
          console.log(event, el);
          
          //... некий код js/jq
          
      return false;
    });
  }
 
})();

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> a.a{ color: #FF3300; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $("table").on("contextmenu", "a.a", function(event) { event.preventDefault() }) }); </script> </head> <body> <table> <tr> <td><a href="" class="a">1</a></td> <td><a href="" class="a">2</a></td> <td><a href="" class="a">3</a></td> <td><a href="" class="a">4</a></td> <td><a href="" class="a">5</a></td> </tr> <tr> <td><a href="" class="a">1</a></td> <td><a href="" class="a">2</a></td> <td><a href="" class="a">3</a></td> <td><a href="" class="a">4</a></td> <td><a href="" class="a">5</a></td> </tr> <tr> <td><a href="" class="a">1</a></td> <td><a href="" class="a">2</a></td> <td><a href="" class="a">3</a></td> <td><a href="" class="a">4</a></td> <td><a href="" class="a">5</a></td> </tr> </table> <a href="" class="test">1</a> <a href="" class="test">2</a> <a href="" class="test">3</a> <a href="" class="test">4</a> <a href="" class="test">5</a> <table> <tr> <td><a href="" class="a">1</a></td> <td><a href="" class="a">2</a></td> <td><a href="" class="a">3</a></td> <td><a href="" class="a">4</a></td> <td><a href="" class="a">5</a></td> </tr> <tr> <td><a href="" class="a">1</a></td> <td><a href="" class="a">2</a></td> <td><a href="" class="a">3</a></td> <td><a href="" class="a">4</a></td> <td><a href="" class="a">5</a></td> </tr> </table> </body> </html>