那些遇到过的问题

我的ajax请求提交一次,然后两次,然后提交4次并保持加倍

6 javascript ajax jquery

我在底部有下一个和上一个按钮的标签,当我第一次加载页面ajaxloads数据到标签一,当我点击下一个表格将提交罚款,但如果我按下一个后按下它将'拉另一个ajax到填充第一次潜水的方式与我在加载时的方式相同,但是当我点击下一步提交表单时,ajax请求加倍并提交两次,然后4次8等,我怎么能阻止这种情况发生....我的我的一个页面上的jquery是相同的:

$(document).on("click",".previous", function()
{
    $.ajax({
        url: '<?php echo Config::get('URL'); ?>wizzard/personal_information',
        type: 'GET',
        success: function(data){
            $('#tab2').html('');
            $('#tab2').removeClass('active');
            $('.tab_2').removeClass('active');
            $('#tab1').html(data);
            $('#tab1').addClass('active');
            $('.tab_1').addClass('active');
        }
    });
});

$(document).on("click",".next", function()
{
    $('#update_contact_information').on("submit", function()
    {

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            dataType: 'json',
            data: $(this).serialize(),
            success: function(data){
                if(!data.success){
                    $.notify(data.error,{
                        className:'error',
                        clickToHide: true,
                        autoHide: true,
                        globalPosition: 'bottom right'
                    });

                    $.ajax({
                        url: '<?php echo Config::get('URL'); ?>wizzard/employment_history',
                        type: 'GET',
                        success: function(data){
                            $('#tab2').removeClass('active');
                            $('.tab_2').removeClass('active');
                            $('#tab2').html('');
                            $('#tab3').html(data);
                            $('#tab3').addClass('active');
                            $('.tab_3').addClass('active');
                        }
                    });
                }else{
                    $.notify(data.success,{
                        className:'success',
                        clickToHide: true,
                        autoHide: true,
                        globalPosition: 'bottom right'
                    });
                    $.ajax({
                        url: '<?php echo Config::get('URL'); ?>wizzard/employment_history',
                        type: 'GET',
                        success: function(data){
                            $('#tab2').html('');
                            $('#tab2').removeClass('active');
                            $('.tab_2').removeClass('active');
                            $('#tab3').html(data);
                            $('#tab3').addClass('active');
                            $('.tab_3').addClass('active');
                        }
                    });
                }
            }
        });
        return false;
    });

    $('#update_contact_information').trigger('submit');
});
Run Code Online (Sandbox Code Playgroud)

我的标签:

    <div class="panel-body">
        <div id="rootwizard">
                <div class="navbar">
                  <div class="navbar-inner">
                    <div class="container">
                <ul class="nav nav-pills">
                    <li class="active tab_1"><a href="#tab1" data-toggle="tab"><?php echo System::translate("Personal information"); ?></a></li>
                    <li class="tab_2"><a href="#tab2" data-toggle="tab"><?php echo System::translate("Contact information"); ?></a></li>
                    <li class="tab_3"><a href="#tab3" data-toggle="tab"><?php echo System::translate("Employment history"); ?></a></li>
                    <li class="tab_4"><a href="#tab4" data-toggle="tab"><?php echo System::translate("Qualification history"); ?></a></li>
                    <li class="tab_5"><a href="#tab5" data-toggle="tab"><?php echo System::translate("Avatar"); ?></a></li>
                </ul>
                 </div>
                  </div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">

                    </div>
                    <div class="tab-pane" id="tab2">

                    </div>
                    <div class="tab-pane" id="tab3">

                    </div>
                    <div class="tab-pane" id="tab4">

                    </div>
                    <div class="tab-pane" id="tab5">

                    </div>
                    <ul class="pager wizard">
                        <li class="previous"><a href="javascript:;"><?php echo System::translate("Previous"); ?></a></li>
                        <li class="next"><a href="javascript:;"><?php echo System::translate("Next"); ?></a></li>
                    </ul>
                </div>  
            </div>
Run Code Online (Sandbox Code Playgroud)

和最初的电话:

<script>
$(function(){

    $.ajax({
        url: '<?php echo Config::get('URL'); ?>wizzard/personal_information',
        type: 'GET',
        success: function(data){
            $('#tab1').html(data);
        }
    });
});
</script>
Run Code Online (Sandbox Code Playgroud)

Mus*_*usa 8

每次单击按钮时,您都会将新的提交事件绑定到表单,这就是为什么它会加倍.从clickk处理程序中删除绑定

$(document).on("click",".next", function()
{

    $('#update_contact_information').trigger('submit');
});

$(document).on("submit", '#update_contact_information', function()
{

    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        dataType: 'json',
        data: $(this).serialize(),
        success: function(data){
            if(!data.success){
                $.notify(data.error,{
                    className:'error',
                    clickToHide: true,
                    autoHide: true,
                    globalPosition: 'bottom right'
                });

                $.ajax({
                    url: '<?php echo Config::get('URL'); ?>wizzard/employment_history',
                    type: 'GET',
                    success: function(data){
                        $('#tab2').removeClass('active');
                        $('.tab_2').removeClass('active');
                        $('#tab2').html('');
                        $('#tab3').html(data);
                        $('#tab3').addClass('active');
                        $('.tab_3').addClass('active');
                    }
                });
            }else{
                $.notify(data.success,{
                    className:'success',
                    clickToHide: true,
                    autoHide: true,
                    globalPosition: 'bottom right'
                });
                $.ajax({
                    url: '<?php echo Config::get('URL'); ?>wizzard/employment_history',
                    type: 'GET',
                    success: function(data){
                        $('#tab2').html('');
                        $('#tab2').removeClass('active');
                        $('.tab_2').removeClass('active');
                        $('#tab3').html(data);
                        $('#tab3').addClass('active');
                        $('.tab_3').addClass('active');
                    }
                });
            }
        }
    });
    return false;
});
Run Code Online (Sandbox Code Playgroud)

amb*_*erv 3

在前面的两个答案中，人们（正确地）建议您重构代码，以避免在另一个事件处理程序中注册事件处理程序。然而，由于您不接受这些答案，我认为这并不能完全回答问题。

您要做的就是在单击“下一步”按钮时简单地提交表单内容。同时，该按钮不是表单的一部分，因此单击它不会触发“提交”事件。所以您正在手动触发该事件。

现在你的描述中奇怪的是你的ajax请求在每次点击时都会加倍。通常，每次点击您都会再添加一个请求。请参阅我的小提琴，这是代码的简化版本。

var form = $('form');

$(document).on('click', '.next', function(){
  form.on('submit', function() {//with every click one more handler is registered. Click the "click" link several times to see
      alert('submit fired'); 
      return false;
  });
  form.trigger('submit')
})
Run Code Online (Sandbox Code Playgroud)

因此，问题出现了：您在哪里注册您的处理程序$(document).on("click",".next", function()？您需要确保该处理程序仅注册一次。为此，您可以alert('registering handler')在代码中的该行之前放置进行检查。修改后的 fiddle中显示了注册事件处理程序的正确顺序。代码是：

var form = $('form');

$(document).on('click', '.next', function(){

  form.trigger('submit')
})
form.on('submit', function() {//with every click one more handler is registered. Click the "click" link several times to see
  alert('submit fired'); 
  return false;
});
Run Code Online (Sandbox Code Playgroud)

那么，要继续，您可以尝试我的建议并让我知道结果吗？

PS 我根本不知道为什么你需要触发表单提交。对于您的 ajax 请求，您正在序列化表单并取消初始提交（您return false；）。因此，我建议完全避免使用“提交”事件，而只在“单击”处理程序中完成所有工作。

更新（在下面的评论中添加更多信息后）

所以问题的第二部分如下。每次“下一个”单击时，您都会附加新的事件侦听器，并且会像这样替换选项卡的 html $('#tab2').html(data);，并且data不仅包含标记，还包含插入它时正在执行的 js 代码（顺便说一句，我不知道它像这样工作，很好）。我认为您所期望的是，一旦删除标记（html），相应的事件侦听器也将被删除。但事实上并非如此。为什么？因为您正在委托您的事件侦听，document代码开头为：

$(document).on("click",".next", function()
Run Code Online (Sandbox Code Playgroud)

这$(document)是您将侦听器附加到的内容。我强烈建议您查看事件委托的原始 jquery 解释，而不是深入细节。

那么如何解决呢？有几种不同的方法。可能最简单的一种（最少的代码编辑量）是在执行此操作之前删除事件侦听器.html(data)。另一种方法也很简单，就是写

$('.next').on("click", function(),
Run Code Online (Sandbox Code Playgroud)

正如您在 Qualification_history.php 中所做的那样。通过这种方式，您可以将事件附加到元素本身，而不是文档。唯一的事情是，您需要确保在执行此代码之前存在相应的 DOM 元素（因此您可以将代码放在标记之后）。

归档时间：

查看次数：

888 次

最近记录：

7 年，3 月 前
相关归档
如何检测DIV的尺寸变化？ 314
强制浏览器刷新css,javascript等 75
如何在fullcalendar上获得开始和结束时间？ 21
JavaScript反引号多行字符串无法在Internet Explorer中运行 21
在AngularJS中轻松控制dom - 单击按钮,然后将焦点设置为输入元素 19
IE <= 8从AJAX接收时删除<form>标记 9
无限的ajax滚动分页循环 7
JQuery Ajax在没有设置cookie的情况下自动重定向？ 6
Slim Framework - jQuery $ .ajax请求 - Access-Control-Allow-Methods不允许使用方法DELETE 6
用jquery调用"imdbapi.com" 5
难疑归档
JavaScript等效于printf/String.Format 1874
什么是 ":-!!" 用C代码？ 1627
在单个SQL查询中插入多行？ 1604
在Vim中复制整行 1555
如何在Android应用程序中的活动之间传递数据？ 1293
在Node.js中读取环境变量 1240
将项目导入Eclipse后,"必须覆盖超类方法"错误 1223
Android SDK安装找不到JDK 1185
C中的函数指针如何工作？ 1170
LF将被git中的CRLF取代 - 这是什么,它是否重要？ 1146