Question

This is my first post so I hope I am not violating any rules. I have searched quite extensively, but possibly may have not looked for the correct terms that I am looking to resolve.

At any rate, my problem is this:
I have a table generated with a list of items, the left-most column has a button when clicked calls an ajax Post and or load function to query the history of the item and list it below the table. This works in its true sense of the expected result, however, reviewing the console through FireBug, subsequent clicks on buttons in the list result in the doubling of posts. ie. 1st click shows 1 console event, 2nd click shows 2 console events, 3rd click shows 4 console events, and so on. this continues until I select a different location and the count resets.

The below is what I see in the console. This presents a problem with timing as each subsequent post takes longer.

clicking the hist-tag button 5365

>GET http://localhost/digipens/query.php?rec_id=5365

clicking the hist-tag button 5365

>GET http://localhost/digipens/query.php?rec_id=5365

clicking the hist-tag button 5365

>GET http://localhost/digipens/query.php?rec_id=5365

clicking the hist-tag button 5365

>GET http://localhost/digipens/query.php?rec_id=5365

code:

$('.hist-tag').click(function(){

  var ID=$(this).closest('tr').attr('id')

  itemid  = $("#itemid_input_"+ID).val();
  dataString = '?rec_id='+ID;

  $('#item_hist').load('query.php' + dataString); 

});

Any ideas or different ways to accomplish the same goal would be excellent.

Thanks!

Answer 1

I suspect your click event is somehow being re-bound on each return.
Perhaps the same script is included in the response from your load call?

Try this:

$('.hist-tag').off('click');
$('.hist-tag').on('click', function(){
    var ID=$(this).closest('tr').attr('id');
    itemid=$("#itemid_input_"+ID).val();
    dataString = '?rec_id='+ID;
    $('#item_hist').load('query.php' + dataString);
    return false;  // prevents bubbling the click to the container
});