understanding javascript events and timing to fix dynamic email bug

Question

This is a bit hard to explain. I have a search results page with hundred of hospital and physician listings. Each record is loaded into a javascript array when the page loads, so all records are accessible without a page reload. A user may also click a "Details" page which shows detailed information for each individual hospital or physician. This, too, is dynamic and doesn't require a page reload.

Here's where my issue comes in.

On each details page, the user has the ability to Share (email) the hospital/physician information. My issue is that if a user attempts to share multiple hospital/physician listings one after the other, the mailto link seems to open every single email instance that the user has previously opened.

Clicking Share on Hospital A opens an email window for Hospital A. Closing this Share window, then clicking Share for Hospital C opens 2 windows - Hospital A and Hospital C - as if an array is being stored of all successive Shares. Confusing, yes, I know :-)

Let me break down the code a bit. The Details page is handled by a function showDetails(id). The id parameter is the record whose details are being shown, and in this Details page lies the Share button. Here's an overview of the function (very condensed):

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:name@domain.com?subject=Provider Information&body='+body_message;
      $(this).click(function(){
        window.location.href = mailtoVal;
        return false;
      });
    });
  });
}

And down below, this code is my actual link:

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

Like I said before, this works fine when I click the Share button for my first record when the page loads. If I open another, both my first and second Share open.

When I debug, I can see mailtoVal is never set to the appropriate value. It's almost as if it's storing each successive Share as an array somewhere and looping through each of them when clicking Share.

My gut feeling tells me there's something I'll need to do with setTimeout or some sort of asynchronous coding, but I'm a bit hazy on best ways to go about doing those.

Would it be best to create another function outside of showDetails() to handle the Share? I've put off doing this, because I would need to receive the ID as a parameter and retrieve the results for the ID... again.

Please Note - the bulk of this code was not written by me. I've been assigned to this project fairly late in its dev cycle, and now I'm simply trying to debug it.

I know this is a bit confusing, so please let me know if there is any additional info needed.

Answer 1

You have to disable previous click handlers before you bind another one:

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

Without the .off() the event handlers keep getting added to your Share link, causing what you were experiencing.

Additionally, you can remove the $(document).ready(function() { ... } inside the showDetails() function. It's not necessary there; just make sure showDetails() is not called before the page is fully loaded.