JQuery Mobile changePage() flaky when called from

问题:

I have a Jquery Mobile page with a simple select-menu.

    <div class="selectMenuContainer">
        <div data-role="fieldcontain">
            <label for="selectmenu" class="select">Heroes:</label>
            <select name="selectmenu" id="heroSelectMenu" class="heroSelectMenu" >
                <option value="0">Choose One...</option>
                <option value="Option 1">Option 1</option>
                <option value="Option 2">Option 2</option>
            </select>
        </div>
    </div>

On the event pageinit, I use jQuery to .remove() everything from the select-menu, and then I dynamically add many options. Of course, I don't forget to refresh the select-menu.

function populateHeroNames(){
    //populate hero select item
    $('#heroSelectMenu').empty();
    $('#heroSelectMenu').append('<option value="0">Please Choose...</option>');
    for(var i=0;i<heroNameLength;i++){
        if(heroName[i]){
            var currentHeroName = heroName[i];
        }else{continue;}
        $('#heroSelectMenu').append('<option value="'+i+'">'+currentHeroName+'</option>');
    }
    //refresh hero select item
    var heroSelectMenu = $("#heroSelectMenu");
    heroSelectMenu.selectmenu("refresh");
    console.log('heroes added!');
}

My problem is that I cannot successfully navigate to a different page from a programmatically created option. I can do it just fine from hard-coded option though. When I click a hard coded option, I'm able to use $.mobile.changePage() just fine. But from a programmatically created option, the page I'm navigating to will disappear, and go back to the initial page.

In testing, when I click the back button I actually go to my destination. So it's obvious that JqueryM has navigated to the destination, but then went back for some reason.

I suspect the reason is Jquery Mobile's quirky DOM loading. Is there something I need to refresh...or maybe prevent from refreshing? Just navigate to the page...and stay there dang it!