Jquery 一个（）不使用AJAX？

我的页面上有三个div框在每个div框中有一个delete按钮，我按下该按钮可以从代码中删除div框。同一事件中的ajax请求会根据按下的div框向服务器发送一个唯一的编号。为了防止在delete按钮上调用多个click事件，我使用了one（）事件。但在少数情况下，如果我快速单击按钮，它将触发两次事件，并且我看到数据库接收到重复的数字。我以为一个可以阻止这种事情发生。我的jquery代码有什么问题导致它触发两次？我的代码如下

HTML中的示例按钮

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

jQuery代码

$('#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();
    });
});

$（'delete#post_1'）。一（'click'，function（）{
var会话_用户_id=；
var数=1；
$.post（'ajax\u delete\u post.php'{
用户标识：会话用户标识，
号码：号码
}，函数（）{
$（'#post_1'）。删除（）；
});
});
$（'delete#post_2'）。一（'click'，function（）{
var会话_用户_id=；
var数=2；
$.post（'ajax\u delete\u post.php'{
用户标识：会话用户标识，
号码：号码
}，函数（）{
$（'#post_2'）。删除（）；
});
});
$（'#delete_post_3'）。一（'click'，function（）{
var会话_用户_id=；
var数=3；
$.post（'ajax\u delete\u post.php'{
用户标识：会话用户标识，
号码：号码
}，函数（）{
$（'#post_3'）。删除（）；
});
});

更新：根据请求，我将对整个页面的代码进行简要解释

<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>

//文档准备好后，加载jquery代码，该代码允许当前
//存在于页面上，以具有将删除该框的单击事件。这是一样的
//在我的示例中可以看到上面的代码。
//填写信息的表格
//单击表单按钮时发送的ajax帖子
$.post（'ajax_file.php'，{data:data}，函数（data）{
//在这里创建div框
//从页面顶部复制了jquery代码。如果没有它，div box delete按钮将执行此操作
//不行
});

首先，请检查控制台之间是否没有空格

是否可以尝试此代码并检查控制台是否触发两次

$('#delete_post_3').on('click', function(event) {
    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();
    })
    $(this).off(event);
})

在单击按钮上添加一个
'.disabled'
类，并让单击事件在事件选择器上有一个
：not（.disabled）
，怎么样

例如：

$（'delete#post_1:not（.disabled'）。一（'click'，function（）{
$（this.addClass（'disabled'）；
var会话_用户_id=；
var数=1；
$.post（'ajax\u delete\u post.php'{
用户标识：会话用户标识，
号码：号码
}，函数（）{
$（'#post_1'）。删除（）；
});
});
我不知道这个问题是否得到了解决，但考虑到评论中的所有反馈，您似乎将
一个绑定了两次，并且似乎基于您在
用户23875
的回答中留下的评论，您知道这一点

如果将事件绑定两次，它将执行两次，就这么简单

如果您完全知道要绑定事件两次，为什么不先尝试解除绑定任何先前附加的事件呢

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

除非您同时两次重新呈现完整的HTML，否则上述操作将确保您只附加了一个单击事件

正如
user23875
所指出的，您的脚本中肯定有一些古怪的东西

您应该尽可能地分离代码，以确保只打算运行的代码只会被调用，等等

希望上述内容能够解决此问题。
根据我在您的文档中的理解：

<script>
   //if #delete_post_1 exists in the page, it receives a "once" event handler to delete #post_1
</script>

<form>
</form>

<script>
$.post('ajax_file.php', {data: data}, function(data){
   //if the request succeeds, this html code is loaded into the DOM
<script>
       //are you sure that you do not bind a *second* "once" event handler to #delete_post_1 ?
</script>
});

</script>


//如果页面中存在#delete#u post_1，它将接收一个“once”事件处理程序来删除#post_1
$.post（'ajax_file.php'，{data:data}，函数（data）{
//如果请求成功，此html代码将加载到DOM中
//是否确实没有将*second*“once”事件处理程序绑定到#delete_post_1？
});
您似乎正在使用同步调用问题。删除从单击函数到新函数的所有代码。单击调用该函数。还可以使用异步ajax请求
 您应该锁定您的帖子，也许可以将所有内容都放在一个函数中，如下所示：

            var locker = 0;
        $('.delete_post').on('click', function() {
        if (locker == 0)
        {
        locker = 1;
        var session_user_id = <? php echo $session_user_id; ?> ;
        var number = $(this).attr('id');
        $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: number
        }, function() {
        $('#'+number).remove();
        locker = 0
        });
        }
        });

var-locker=0；
$（'.delete_post'）。在（'click'，function（）上{
if（locker==0）
{
储物柜=1；
var会话_用户_id=；
var number=$（this.attr（'id'）；
$.post（'ajax\u delete\u post.php'{
用户标识：会话用户标识，
号码：号码
}，函数（）{
$（'#'+数字）.remove（）；
储物柜=0
});
}
});

您的输入内容当然应该是这样的：

<input id="3" class="delete_post" type="button" value="X">
 <input id="2" class="delete_post" type="button" value="X">
  <input id="1" class="delete_post" type="button" value="X">

每次添加更多按钮时，停止绑定事件，而是使用事件委派仅绑定一次

var session_user_id = <? php echo $session_user_id; ?> ;
$("#someparentelement").on( "click", "button[id^=delete_post]:not(.handled)", function(){
    var theid = this.id.replace(/delete_post_/i,"");
    $(this).addClass("handled");
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: theid
    }, function() {
        $('#post_' + theid).remove();
    });
});

var会话用户id=；
$（“#someparentelement”）。在（“单击”，“按钮[id^=delete_post]：未（.handled）”，函数（）上{
var theid=this.id.replace（/delete\u post\u/i，“”）；
$（此）.addClass（“已处理”）；
$.post（'ajax\u delete\u post.php'{
用户标识：会话用户标识，
编号：theid
}，函数（）{
$（'#post'+theid）.remove（）；
});
});

不过需要注意的是，我怀疑您不需要传递
用户id
，php应该能够将其从会话中拉出

编辑：Oops，
.one
delegated仍然只触发一个事件，而不是每个子事件触发一个事件。更新为类似的
。关于
功能


重要

不要将此代码放在一个将执行多次的位置。
我知道您的问题是要找出one（）不起作用的原因。但在讨论过程中，我们都确定您最终创建了多个one（）声明。我们现在还知道，对于您声明的每一个（）都将得到一个execute，这对于您的情况是不希望的。而这从技术上来说是一个答案
var session_user_id = <? php echo $session_user_id; ?> ;
$("#someparentelement").on( "click", "button[id^=delete_post]:not(.handled)", function(){
    var theid = this.id.replace(/delete_post_/i,"");
    $(this).addClass("handled");
    $.post('ajax_delete_post.php', {
        user_id: session_user_id,
        number: theid
    }, function() {
        $('#post_' + theid).remove();
    });
});