Question

Say I have this:

<div id="tabs" class="hide">
    <ul>
        <li><a href="/tabs/1">Tab 1</a></li>
    </ul>               
</div>

Tab Page JS:

$(document).ready(function() {

    $("#tabs").tabs();
    console.log($('a#someBtn').text()); // doesn't work - always returns empty string
});

Tab 1 Contents:

     <a href="" id="someBtn">link</a>

Basically, the tabs work, but I’m unable to interact with the contents of the tab. How can I fix this?

Many of my tabs will have buttons in the content that launch modal windows. This is what I’m trying to get to.

Answer 1

It looks as if you are loading the tabs using AJAX (since you give it and actual URL /tabs/1 and not an anchor to a div id). In your code, when you select a#someBtn the remote content hasn’t been loaded yet (since it runs asynchronously). Try to use the AJAX onload event:

$(document).ready(function() {
    $("#tabs").tabs({
        load : function(event, ui)
        {
            console.log($('a#someBtn').text()); // doesn't work - always returns empty string
        }
    });
});