到达引导标签的结尾+1时触发事件

Question

我有这个代码，它实现了包含某些表单的引导选项卡的下一个和上一个按钮。

当用户通过下一个按钮导航到最后一个标签时，按钮（下一个）文本将变为＆＃34;提交＆＃34;。现在我希望当用户点击这个所谓的新按钮（提交按钮）时，我会提交表单。

目前这是我的代码并且它有效，但我认为它可以改进，所以我不必像我目前那样再次将另一个点击事件绑定到提交按钮。

    $('#prev').click(function(e) {
    e.preventDefault();

    $('.nav-tabs > .active').prev('li').find('a').trigger('click');
    if($('.active').not('li:last')){
        $('#next').text('Next');
    }

});

$('#next').click(function(e) {
    e.preventDefault();
    $('.nav-tabs > .active').next('li').find('a').trigger('click');
    if($('.active').is('li:last')){
        $(this).text('Submit');

        $(this).click(function() {
            alert('Submitting to server');
        });
    }
});

HTML

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#tab_1" aria-controls="tab_1" role="tab" data-toggle="tab">Tab 1</a>
    </li>
    <li role="presentation"><a href="#tab_2" aria-controls="tab_2" role="tab" data-toggle="tab">Tab 2</a>
    </li>
    <li role="presentation"><a href="#tab_3" aria-controls="tab_3" role="tab" data-toggle="tab">Tab 3</a>
    </li>
    <li role="presentation"><a href="#tab_4" aria-controls="tab_4" role="tab" data-toggle="tab">Tab 4</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="tab_1">Content 1</div>
    <div role="tabpanel" class="tab-pane fade" id="tab_2">Content 2</div>
    <div role="tabpanel" class="tab-pane fade" id="tab_3">Content 3</div>
    <div role="tabpanel" class="tab-pane fade" id="tab_4">Content 4</div>
  </div>

  <a id='prev' href='#' class="btn btn-primary">Prev</a>
  <a id='next' href='#' class="btn btn-primary">Next</a>
</div>