Why does text of previous links clicked on the page show up in an AJAX request?

Question

Here's a bootstrap modal that I'm putting the result of AJAX request in

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div id="modal-body"></div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

The javascript code looks like this

<script type="text/javascript">
  $('#myModal').modal('hide');
  $('div.divBox a').click(function(){
    var vendor = $(this).text();
    console.log(vendor);
    $('#myModal').on('show', function(){          
      $.ajax({
        type: "GET",
        url: "ip.php",
        data: "id=" + vendor,
        success: function(html){
          $("#modal-body").html(html);              
        }
      });           
    });
  });
  $('#myModal').on('hide', function () {
    $("#modal-body").empty();
    <?php unset($_GET); ?>;
  })
</script>

the ip.php file is

The anchor links code looks like this

           <tbody>
              <?php foreach ($rowarr as $k => $v) { ?>
                <tr>
                  <td><?php echo $k ?></td>
                  <td>
                    <div class="divBox">
                      <a data-toggle="modal" href="#myModal"><?php echo $v; ?></a>
                    </div>
                  </td>
                </tr>
              <?php } ?>
            </tbody>

$k is a number. $v is a name with spaces and special characters.

console.log(vendor) shows me the text of the link I clicked in CDT. But the output of the modal changes. It goes through all the links text I clicked previously, and keeps replacing them and finally ends up at the most current link text.

So if clicked the links in this order the console output looks like this

Microsoft Corporation
IBM Corp
Hewlett-Packard
Apple

The text in the modal will start out as

Array ( [id] => Microsoft Corporation )

then replace with

Array ( [id] => IBM Corp )

then replace with

Array ( [id] => Hewlett-Packard)

then end up with

Array ( [id] => Apple )

What is keeping track of the links clicked on the page ? Do I need to reset it every time a new link is clicked ?

EDIT: In response to "What have you tried?"

I added the $("#modal-body").empty(); in there in hope that maybe it's the modal body that I need to cleared. That wasn't it. Then I thought maybe the GET variable need to be reset on closing of the modal, so I added the <?php unset($_GET); ?>;. But the print_r($_GET) shows that the array only contains one array element, not all the links clicked previously. So I can't figure where else the history of the links clicked be stored.

Answer 1

So basically, each time you click a divBox link, it adds a new handler to the myModal 'show' event. So basically after clicking 5 differentdivBox links, myModal's show event will cycle through 5 different handler functions.

Basically you need to remove the previously added 'show' handler before adding a new one.

$('#myModal').off('show');

Best way to remove an event handler in jQuery?