在选项卡的远程页面中使用上一页/下一页按钮

Question

我有一系列显示来自远程源的内容的选项卡。最终结果将是每个选项卡中的一系列表单，当用户填写并单击这些表单时，按钮将把它们带到下一个选项卡。只有具有焦点的选项卡将被启用，所有其他选项卡将被禁用。我有实现这一切的基本功能--但是，我在处理远程HTML页面的“上一个”和“下一个”按钮时遇到了问题。我有一个基本控件正常工作--但没有远程页面调用--的Fiddle设置。

JSFiddle

父页面的HTML：

 <div id="tabs">
  <ul>
            <li><a href="#tabs-1">General Information</a></li>
            <li><a href="#tabs-2">Phone Information</a></li>
            <li><a href="#tabs-3">Emergency Contact Information</a></li>
            <li><a href="#tabs-4">Job Related Information</a></li>
            <li><a href="#tabs-5">Miscellaneous Information</a></li>
  </ul>


<div id="tab-content">
        <div id="tabs-1">
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div> 
        <div id="tabs-4">
        </div>        
        <div id="tabs-5">
        </div>  
 </div>            

​

Tab脚本:这是我加载数据的方式

<script>
    $('#tabs-1').load('nes/data/EmployeeGenInfo.htm');
    $('#tabs-2').load('nes/data/EmployeePhoneInfo.htm');
    $('#tabs-3').load('nes/data/EmployeeEmergInfo.htm');
    $('#tabs-4').load('nes/data/EmployeeJobInfo.htm');
    $('#tabs-5').load('nes/data/EmployeeMiscInfo.htm');
</script>

这是第二部分：

我需要从SERVLET获取数据，并将这些数据填充到每个表单的选项卡中的子页面中。到目前为止，我已经有了正确的选项卡函数-你可以在这里看到一个准工作示例- JSFiddle -选项卡内容不能显示，因为它是远程调用的。下面是TAB控件的JAVASCRIPT：

$(function() {

    $("#tabs").tabs({disabled: [0,1,2,3,4,5]});

    var $emptabs = $('#tabs').tabs();

    $('#tabs').on('click', '#submit1', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,2,3,4,5]);
    });

    $('#tabs').on('click', '#submit2', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,3,4,5]);
    });

    $('#tabs').on('click', '#submit3', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,2,4,5]);
    });

    $('#tabs').on('click', '#submit4', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,2,3,5]);
    });

    $('#tabs').on('click', '#submit5', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,2,3,4]);
    });

        $('#tabs').on('click', '#reset', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected-5);
        $emptabs.tabs("option", "disabled", [0,1,2,3,4,5]);
    });

});

所有的HTML仍然是一样的。我需要知道如何以及在哪里为每个按钮放置我的AJAX调用。我知道它会是这样的：

var v = $("#form1").validate({
        submitHandler: function() { 
             $.ajax({
                        type:"post",
                        url:"ActionServlet",
                        data:'JSON',
                        success: function(response){
                            alert("FORM SHOULD SUBMIT HERE");
                        // Change only the header of the file.
                    if (v2.form()) {
                        $emptabs.tabs('select', selected+1);
                        $emptabs.tabs("option", "disabled", [0,2,3,4,5]);
                        }
                    }
            });

我在以前的项目中已经有了一个SERVLET设置，使用的是折叠面板而不是选项卡，所以我知道过程几乎是一样的。但是手风琴的设置与标签的设置有很大的不同。如果你还需要看什么，请告诉我。

Answer 1

问题可能是，当您定义click()函数时，DOM中不存在按钮。

尝试委派单击事件：

$('#myTabs').on('click', '#finish1', function() {
    etc.

这允许在最初加载DOM之后添加按钮。