Question

我正在使用jQuery在新窗口或新标签页中打开PDF。在大多数情况下，它是有效的。我可以单击链接，然后PDF在新选项卡中打开。

打开另一个PDF时出现问题。

新的PDF将与先前的PDF一起打开。到我获得第5个PDF时，以前打开的PDF中将有4个其他选项卡。

我正在使用数据表。我单击包含数据属性的链接，然后打开一个模式。在模态内部，我将有另一个单击事件，然后将打开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创建一个新事件，从而使您打开的标签页数量呈指数增长。

在window.open(pdf);之后和fail(function(textStatus)中使用$('#downloadPDF').off('click')。

解决方案：

$('#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');
    });
  });
});

jQuery在选项卡中打开PDF-其他选项卡正在打开

1 个答案: