Inadvertent multiple posts through jquery - php

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

It sounds as if you are adding a click handler as a result of your click. Do you call $('.hist-tag').click() after the table updates? If so, you are adding new click handlers each time, which means the click is handled twice, and then 4 times, and then 8 times, etc.
I can only guess, because I don't see the relevant code here.
If so, the correct solution is to only add your click handler once, and do it via an .on() call. This way, the clicks are handled for current and future elements:
$('#mytable').on('click', '.hist-tag', function(){
var ID=$(this).closest('tr').attr('id');
itemid=$("#itemid_input_"+ID).val();
dataString = '?rec_id='+ID;
$('#item_hist').load('query.php' + dataString);
});
This attaches a handler to an element that you know will always exist #mytable, or whatever the ID of your table is, and then watches for clicks on children that propagate to the table and filters them on the selector you provide, i.e. .hist-tag.
Again, I am guessing, but that's what it seems like is happening from the evidence I have.

Answer 2

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
});