Problem with added dynamic content which gets corrected on page refresh

Sorry for the following long winded question. It is long because I have included all my findings from debugging the problem.

I am confused about what is going on here, I have spent some time trying to debug this, but can't seem to figure out what the problem is:

I have 2 functions which run on page load, getTabMenu() and getTabFrame(), the code for these can be seen right at the end of this question.

These all work fine on page load.

However, after the page load, if I run those functions again ajax style (without refreshing the browser), i.e. via a click event after inserting a record into the database, meaning the functions above will get a little extra html and JSON data. For some reason it keeps opening the first tab page content when the newly created tab is clicked, instead of the tab content it should open even though all the id's seem to be assigned correctly. As soon as I refresh the page via the browser refresh button, it will then start working properly...

Here are some of the html and json outputs I have captured during my debugging:

on page load:

getTabFrame() generates:

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

getTabMenu() generates:

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

All looks good as this happens on page load and it all works correctly.

After inserting a new row in the database and re-running the above functions without refreshing the browser I get:

getTabFrame() generates:

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

GetTabMenu() generates:

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

Again everything looks good, note the extra data in the html and json snippets.

Now for the problem, when I now click on tab4, it sends off the key 4 to the get_tab_content.aspx via url query string, it should be sending off the key 38. So because it sends off the key 4, it gets the same page as if I clicked on tab0, which sends of key 4. Clicking on any of the older tabs, return the correct pages, it's just the newly created tab which is causing a problem.

So now, if I refresh the browser, I get the followi开发者_JAVA技巧ng on page load:

getTabFrame() generates:

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

getTabMenu() generates:

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

Note, this looks exactly the same as the output returned from when the button was clicked without refreshing the browser, which is correct.

Now if I click on tab4, it sends off 38, this is correct, and which intern returns the correct page content...

So basically, rerunning the functions generates the correct html and json, but the newly created data which was not present on page load does not work properly until the browser is refreshed.

Why is this happening?

Here is the getTabMenu() function:

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

and here is the getTabFrame() function:

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

I may be shooting in the dark here, but i don't think the live event handler should be in the ajax success function. if you run it there, it will place additional live event handlers on every call. Try removing it from the function and placing it separately (it doesn't even need to be in inside $(document).ready