Question

I have three div boxes on my pageIn each div box there is a delete button I press that removes the div box from the code. An ajax request in that same event sends an unique number based on which div box was pressed to the server. In order to prevent multiple click events to be called on the delete button, I used the one() event. But in rare events where I click the button quickly it will fire the event twice and I see that the database received duplicate numbers. I thought one() prevents that from happening. What could be wrong with my jquery code to cause it to fire twice? My code is below.

Sample button from HTML

<input id="delete_post_3" type="button" value="X">

jQuery Code

$('#delete_post_1').one('click', function() {
    var session_user_id = <? php echo $session_user_id; ?> ;
    var number = 1;
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: number
    }, function() {
        $('#post_1').remove();
    });
});

$('#delete_post_2').one('click', function() {
    var session_user_id = <? php echo $session_user_id; ?> ;
    var number = 2;
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: number
    }, function() {
        $('#post_2').remove();
    });
});

$('#delete_post_3').one('click', function() {
    var session_user_id = <? php echo $session_user_id; ?> ;
    var number = 3;
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: number
    }, function() {
        $('#post_3').remove();
    });
});

Update: Per request, I’m going to give a brief explanation on my code for the entire page.

<script>

//when document is ready, loads jquery code that allows any div boxes that currently   
//exist on the page to have a click event that will delete the box. this is the same 
//code seen above in my example.

</script>

<form>
//form to fill out info
</form>

<script>
//ajax post sent when form button clicked
$.post('ajax_file.php', {data: data}, function(data){

//in here div box is created

<script>

//duplicated jquery code from top of page. without it the div box delete button does 
//not work

</script>

});

</script>

Answer 1

I can’t tell if this issue is sorted or not, but given all the feedback in the comments it seems you are binding one twice and it also seems based on the comments you left in user23875‘s answer that you are aware of that.

If you bind the event twice it executes twice, simple as that.

If you are fully aware of the fact that you are binding the event twice, why not try unbinding any previous attached event first.

$('#delete_post_1').off('click').one('click', function() {
...
$('#delete_post_2').off('click').one('click', function() {
...
$('#delete_post_3').off('click').one('click', function() {

Unless you are also re-rendering your complete HTML twice the above will make sure you are only ever having attached a single click event.

As user23875 had pointed out, you are certainly doing something funky in your scripts.

You should be separating your code as much as possible to ensure code you only intent to run ones only gets called ones and so on.

Hopefully the above will fix this issue.