Question

我的页面上有三个div框在每个div框中都有一个删除按钮，我按下该代码将删除div框。同一事件中的ajax请求根据向服务器按下div框发送唯一编号。为了防止在删除按钮上调用多个单击事件，我使用了one（）事件。但在罕见的事件中，我快速单击按钮，它将触发事件两次，我看到数据库收到重复的数字。我以为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();
    });
});

更新：根据请求，我将简要介绍整个页面的代码。

<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

我无法判断此问题是否已排序，但鉴于评论中的所有反馈，您似乎绑定了one两次，它似乎也基于您在{{1}中留下的评论你的回答是你知道的。

如果你将事件绑定两次，它会执行两次，就像那样简单。

如果您完全了解自己将事件绑定两次这一事实，那么为什么不首先尝试解除之前任何附加事件的绑定。

user23875

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

正如$('#delete_post_1').off('click').one('click', function() { ... $('#delete_post_2').off('click').one('click', function() { ... $('#delete_post_3').off('click').one('click', function() {指出的那样，你肯定在脚本中做了一些时髦的事情。

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

希望以上内容能解决这个问题。

Answer 2

好吧，首先检查<和php之间是否有空格，以便回显session_user_id ...这可能是一个可能的解决方案，其余的接缝是右。

Answer 3

你可以尝试这个代码并检查控制台是否会触发两次吗？

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

修改

尝试最后一件事：引用

"user_id": session_user_id,
"number": number

Answer 4

如果您在点击按钮上添加'.disabled'课程，并且点击事件在事件选择器上有:not(.disabled)呢？

实施例

$('#delete_post_1:not(.disabled)').one('click', function() { $(this).addClass('disabled'); 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(); }); });

Answer 5

据我在您的文件中所理解的那样：

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

Answer 6

好像您正在使用同步通话问题。从单击函数中删除所有代码到新函数。点击即可调用该功能。也使用异步ajax请求。

Answer 7

你应该锁定你的帖子，也许把所有内容都集成到一个函数中：

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

你输入的东西当然应该是这样的：

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

Answer 8

每次添加更多按钮时停止绑定事件，而不是使用事件委派将它们绑定一次。

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

但请注意，我怀疑你不需要通过user_id，php应该可以将其拉出会话。

编辑：糟糕，.one已删除仍然只会触发一个事件，而不是每个孩子一个。已更新至类似的.on功能。

http://jsfiddle.net/JPULH/

重要
不要将此代码放在多次执行的位置。

Answer 9

我知道你的问题是找出你的一个（）不工作的原因。但看起来，在讨论过程中，我们都确定你最终创建了多个one（）声明。我们现在也知道你会为你声明的每一个（）获得一个执行，这对你的情况是不利的。虽然这个发现在技术上回答了你的问题，但我相信你的问题没有解决。我在想，也许你的方法可以修改你的问题并最终使这个JS小提琴：

http://jsfiddle.net/sEvAn/45/

我的建议的主旨是：

将您的点击事件绑定到OUTER div包装器（在我的示例中为“#post_list”）。这使您可以始终检测删除按钮单击，即使是通过ajax调用新创建/添加到您的DOM的帖子。
在每个按钮上添加自定义数据postid属性，以便您轻松确定需要删除的帖子ID。
在我的示例中，我使用慢fadeOut来模拟慢速ajax调用。但关键是要展示如何使用完成回调函数来执行其他操作（例如删除已成功删除的DOM元素。

这就是它。这是我第一次尝试回答有关stackoverflow的问题，所以我希望你会发现这有用！

一个（）不使用AJAX？

9 个答案:

修改