javascript - 了解JavaScript事件和定时以修复动态电子邮件错误

这有点难以解释。我有一个搜索结果页面，其中包含数百个医院和医生列表。页面加载时，每个记录都被加载到javascript数组中，因此无需重新加载页面即可访问所有记录。用户也可以单击“详细信息”页面，该页面显示每个医院或医生的详细信息。这也是动态的，不需要重新加载页面。

这是我的问题所在。

在每个详细信息页面上，用户都可以共享（通过电子邮件发送）医院/医师信息。我的问题是，如果用户尝试一个接一个地共享多个医院/医师列表，则mailto链接似乎打开了该用户先前打开的每个电子邮件实例。

单击“医院A”上的“共享”将打开“医院A”的电子邮件窗口。关闭此“共享”窗口，然后单击“医院C”的“共享”将打开2个窗口-“医院A”和“医院C”-好像要存储所有连续共享的阵列。令人困惑，是的，我知道:-)

让我分解一下代码。 “详细信息”页面由功能showDetails(id)处理。 id参数是显示其详细信息的记录，并且在“详细信息”页面中有“共享”按钮。以下是该功能的概述（非常简洁）：

function showDetails(id) {
  // make visual transitions to details page //

  rec = new Array();

  // get this record (rec)
  for( var i = 0; i < results.length; i++){
    if (results[i]['row_id'] == id){
      rec = results[i];
      break;
    }
  }

  // set record variables
  var longName = rec['longName'];
  var city = rec['city'];
  var state = rec['state'];
  ...

  // output variables into lovely html //

  // handle Share button. I think this is where my issue is
  $(document).ready(function(){

    $("a[rel='email']").each(function(){
      // Modify the mailto: value
      var mailtoVal = $(this).attr('href');
      var body_message = '';
      body_message += longName+"%0D%0A%0D%0A ";
      body_message += address.replace("<br>","%0D%0A") +"%0D%0A ";
      body_message += city+", "+state+" "+zipCode+"%0D%0A ";
      body_message += phoneFormat(phone)+"%0D%0A %0D%0A ";
      body_message += emailAddress+"%0D%0A ";
      body_message += shortURL+"%0D%0A ";

      mailtoVal = 'mailto:[e-mail]?subject=Provider Information&body='+body_message;
      $(this).click(function(){
        window.location.href = mailtoVal;
        return false;
      });
    });
  });
}

下面是我的实际链接：

<a class="button" href="#" rel="email">Share</a>

就像我之前说过的那样，当页面加载时，当我单击“共享”按钮获取第一条记录时，此方法可以正常工作。如果我打开另一个，则我的第一个和第二个共享都会打开。

调试时，可以看到mailtoVal从未设置为适当的值。几乎就像是将每个连续的Share作为数组存储在某个位置，并在单击Share时循环遍历每个Share。

我的直觉告诉我，我需要使用setTimeout或某种异步编码来做一些事情，但是我对实现这些目标的最佳方法有些困惑。

最好在showDetails()之外创建另一个函数来处理共享吗？我推迟这样做，因为我需要接收ID作为参数并再次获取ID的结果...。

请注意-此代码大部分不是我编写的。在项目开发周期的后期，我已经被分配到了这个项目，现在我只是在尝试调试它。

我知道这有点令人困惑，所以请让我知道是否需要任何其他信息。

最佳答案

您必须先禁用先前的单击处理程序，然后再绑定另一个单击处理程序：

$("a[rel='email']")
    .off('click')
    .each(...)

如果没有.off()，事件处理程序将继续添加到您的“共享”链接中，从而导致您遇到的情况。

此外，您可以删除$(document).ready(function() { ... }函数内的showDetails()。那里没有必要；只要确保在页面完全加载之前未调用showDetails()。