9

我的页面上有三个 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>
4

9 回答 9

3

我不知道这个问题是否已排序，但鉴于评论中的所有反馈，您似乎绑定one了两次，而且似乎也基于您在user23875答案中留下的评论，您知道这一点。

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

如果您完全知道您绑定了两次事件，为什么不先尝试取消绑定任何先前附加的事件。

$('#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已经指出的那样，您肯定在脚本中做了一些时髦的事情。

你应该尽可能地分离你的代码，以确保你只打算运行的代码只会被调用，依此类推。

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

于 2012-09-23T00:59:19.830 回答
0

好吧，首先检查您是否在回显<之间没有空格……这可能是一个可能的解决方案，其余接缝是正确的。phpsession_user_id

于 2012-09-17T21:21:55.890 回答
0

你能试试这个代码并检查控制台是否触发两次？

$('#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
于 2012-09-17T21:29:58.800 回答
0

您如何'.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(); }); });

于 2012-09-21T00:26:05.247 回答
0

根据我在您的文档中的理解：

<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>
于 2012-09-24T11:41:49.080 回答
0

您似乎正在使用同步调用问题。将所有代码从 click 函数删除到新函数。单击时调用该函数。也使用异步ajax请求。

于 2012-09-24T11:44:28.893 回答
0

你应该锁定你的帖子，也许把所有东西都放在一个这样的函数中：

            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">
于 2012-09-27T06:20:36.607 回答
0

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

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

小注意，我怀疑你不需要 pass user_id，php 应该能够将它从会话中拉出来。

编辑：糟糕，.onedelegated 总体上仍然只触发一个事件，而不是每个孩子一个。更新为类似.on功能。

http://jsfiddle.net/JPULH/

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

于 2012-09-27T20:56:42.760 回答
0

我知道您的问题是关于找出您的 one() 不起作用的原因。但看起来，在讨论过程中，我们都确定您最终创建了多个 one() 声明。我们现在还知道，您声明的每个 one() 都会执行一次，这对您的情况来说是不希望的。虽然该发现在技术上回答了您的问题，但我相信您的问题没有解决。我在想也许你对问题的处理方法可以修改并最终制作了这个 JS 小提琴：

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

我的建议要点：

  1. 将您的点击事件绑定到 OUTER div 包装器（在我的示例中为“#post_list”）。这允许您始终检测删除按钮的点击，即使是通过 ajax 调用新创建/添加到您的 DOM 的帖子。
  2. 在每个按钮上包含自定义 data-postid 属性，以便轻松确定需要删除的帖子 ID。
  3. 在我的示例中，我使用了一个缓慢的 fadeOut 来模拟一个缓慢的 ajax 调用。但重点是展示如何使用完成回调函数来做其他事情（比如删除已成功删除的 DOM 元素。

差不多就是这样。这是我第一次尝试回答有关 stackoverflow 的问题，所以希望对您有所帮助！

于 2012-09-27T22:12:08.553 回答