Question

对于以下冗长问题，我们深表歉意。这很长，因为我已将调试问题的所有发现都包括在内。

我对此处发生的事情感到困惑，我花了一些时间尝试调试这个，但似乎无法弄清问题是什么：

我有两个在page load，getTabMenu()和getTabFrame()上运行的函数，这些问题的代码可以在这个问题的最后看到。

这些都适用于page load。

然而，在page load之后，如果我再次运行这些函数ajax style（没有刷新浏览器），即在将记录插入数据库后通过click event，意味着函数以上将获得一些额外的html和JSON数据。由于某种原因，当单击新创建的选项卡时，它会一直打开第一个标签页内容，而不是它应该打开的选项卡内容，即使所有ID似乎都被正确分配。只要我通过浏览器刷新按钮refresh页面，它就会开始正常工作......

以下是我在调试过程中捕获的一些html和json输出：

页面加载

：

getTabFrame()生成：

[
    {
        "key": 4,
        "value": "Internal"
    },
    {
        "key": 5,
        "value": "External"
    },
    {
        "key": 6,
        "value": "Reporting"
    },
    {
        "key": 7,
        "value": "General interest"
    }
]

getTabMenu()生成：

<div class="item" id="tab0">Internal</div>
<div class="item" id="tab1">External</div>
<div class="item" id="tab2">Reporting</div>
<div class="item" id="tab3">General interest</div>

所有看起来都很好，因为这发生在page load上并且一切正常。

在数据库中插入新行并重新运行上述函数而不刷新浏览器后，我得到：

getTabFrame()生成：

[
    {
        "key": 4,
        "value": "Internal"
    },
    {
        "key": 5,
        "value": "External"
    },
    {
        "key": 6,
        "value": "Reporting"
    },
    {
        "key": 7,
        "value": "General interest"
    },
    {
        "key": 38,
        "value": "Other"
    }
]

GetTabMenu()生成：

<div class="item" id="tab0">Internal</div>
<div class="item" id="tab1">External</div>
<div class="item" id="tab2">Reporting</div>
<div class="item" id="tab3">General interest</div>
<div class="item" id="tab4">Other</div>

同样一切看起来都不错，请注意html和json摘要中的额外数据。

现在针对这个问题，当我click tab4时，它会通过url查询字符串将密钥4发送到get_tab_content.aspx，它应该发送给我关键38。因为它发送了密钥4，它就会像我点击tab0一样获得相同的页面，这会发送密钥4。单击任何较旧的选项卡，返回正确的页面，它只是导致问题的新创建的选项卡。

现在，如果我刷新浏览器，我会在page load上获得以下内容：

getTabFrame()生成：

[
    {
        "key": 4,
        "value": "Internal"
    },
    {
        "key": 5,
        "value": "External"
    },
    {
        "key": 6,
        "value": "Reporting"
    },
    {
        "key": 7,
        "value": "General interest"
    },
    {
        "key": 38,
        "value": "Other"
    }
]

getTabMenu()生成：

<div class="item" id="tab0">Internal</div>
<div class="item" id="tab1">External</div>
<div class="item" id="tab2">Reporting</div>
<div class="item" id="tab3">General interest</div>
<div class="item" id="tab4">Other</div>

请注意，这与在没有刷新浏览器的情况下单击按钮时返回的输出完全相同，这是正确的。

现在，如果我点击tab4，它会发送38，这是正确的，哪个实习生会返回正确的网页内容......

所以基本上，重新运行函数会生成正确的html和json，但是在刷新浏览器之前，页面加载时不存在的新创建的数据无法正常工作。

为什么会这样？

以下是getTabMenu()功能：

function getTabMenu() {
    $.ajax({
        url: 'get_tab_menu.aspx?rand=' + Math.random(),
        type: 'GET',
        error: function(xhr, status, error)
        {
            console.log(status);
            console.log(xhr.responseText);
        },
        success: function(results) 
        { 
            $("#div1").empty().append(results);
        }
    });
}

这是getTabFrame()函数：

function getTabFrame() {
    $.ajax({
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) {
            alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
        },
        success: function(results) {
            var tabs = $("#tabs");

            $.each(results, function(index, item) {
                tabs.tabs("add","get_tab_content.aspx?tab=" + item.key, item.value)
                    .find('>ul>li:last')
                    .attr('id', 'tab_' + item.key);

                alert(item.key);

                // new click events
                $("#tab" + index + "").live('click', function() { $("#tabs").tabs( "select" , index ); });
            });

            getTabMenu();
        }
    });
}

Answer 1

我可能会在黑暗中拍摄，但我不认为实时事件处理程序应该在ajax成功函数中。如果你在那里运行它，它将在每次调用时放置额外的实时事件处理程序。尝试将其从函数中删除并单独放置（它甚至不需要在$（文档）内部.ready

添加动态内容的问题在页面刷新时得到纠正

1 个答案: