jQuery открытие PDF во вкладке - открываются дополнительные вкладки

Question

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

Проблема возникает при открытии другого файла PDF.

Откроется новый PDF вместе с предыдущим PDF. К тому времени, когда я доберусь до 5-го PDF-файла, появятся 4 дополнительные вкладки из PDF-файлов, которые я ранее открыл.

Я работаю с таблицами данных. Я нажимаю на ссылку, которая содержит атрибуты данных, которая затем открывает модальное. Внутри модальной области у меня будет еще одно событие клика, которое откроет PDF:

$('#resultsTable').on('click', 'tr > td > a.uploadDocs', function(e)
{
  e.preventDefault();
  $('#editForm input, select').val(''); // <- clear previous values

  var editbooking = $(this).attr('data-editbooking');   
  var editpartnercode = $(this).attr('data-editpartnercode');   

  // open PDF click event
  // takes vars editbooking and editpartner to build path and filename
  $('#downloadPDF').on('click', function()
  {
    var pdf = '../PartnerUploads/' + editpartnercode + '/' + editbooking + ".pdf";
    $.get(pdf)
    .done(function() 
    {
      window.open(pdf); 
    }).fail(function(textStatus)
    {
      if(textStatus.status == 404)
      {
        return false;
      }
    });
    // *** edit ***
    $('#downloadPDF').off('click');
  });
});

Все вышеперечисленное работает, если перейти к каталогу, а затем открыть файл. Но он не должен открывать все ранее открытые файлы.

Как узнать, почему открываются дополнительные вкладки при открытии PDF-файла?

Answer 1

Как уже упоминалось в комментариях, у вас есть вложенная привязка событий.

Каждый раз, когда вы нажимаете #resultsTable, вы каждый раз создаете новое событие для #downloadPDF, что приводит к экспоненциальному увеличению количества открываемых вкладок.

Используйте $('#downloadPDF').off('click') после window.open(pdf); и один внутри fail(function(textStatus).

---

Решение:

$('#resultsTable').on('click', 'tr > td > a.uploadDocs', function(e)
{
  e.preventDefault();
  $('#editForm input, select').val(''); // <- clear previous values

  var editbooking = $(this).attr('data-editbooking');   
  var editpartnercode = $(this).attr('data-editpartnercode');   

  // open PDF click event
  // takes vars editbooking and editpartner to build path and filename
  $('#downloadPDF').on('click', function()
  {
    var pdf = '../PartnerUploads/' + editpartnercode + '/' + editbooking + ".pdf";
    $.get(pdf)
    .done(function() 
    {
      window.open(pdf); 
      $('#downloadPDF').off('click');
    }).fail(function(textStatus)
    {
      if(textStatus.status == 404)
      {
        return false;
      }
      $('#downloadPDF').off('click');
    });
  });
});