我在底部有带有下一个和上一个按钮的选项卡，当我第一次加载页面时，ajax 将数据加载到第一个选项卡中，当我单击下一个时，该表单将正常提交，但是如果我在按下一个之后按上一个，它将拉另一个 ajax 以与我在加载时相同的方式填充第一次潜水，但是当我单击下一步提交表单时，ajax 请求加倍并提交两次，然后 4 次 8 等，我怎样才能阻止它 happeing.. .. 我的一个页面上的 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');
});

我的标签:

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

和初始调用:

<script>
$(function(){

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

最佳答案

每次单击按钮时，您都会将一个新的提交事件绑定(bind)到表单，这就是它加倍的原因。从 clickk 处理程序中删除绑定(bind)

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

关于javascript - 我的 ajax 请求提交一次，然后提交两次，然后提交 4 次并不断加倍，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35729883/