Can't seem to find element to append

Hi I have a select box with id 'quote-area' that I want to dynamically create options for.

It's for a mobile app using jQuery mobile and HTML5.

I have a table of areas saved locally, I'm pulling them out and putting them in a for for loop constructing a html string which I then append to the select box.

Here is my JS:

               function(tx, results) {
                    len = results.rows.length;

                    var markup = [];

                    for(var i=0; i< len; i++){

                        var area_id= results.rows.item(i).area_id;
                        var label = results.rows.item(i).label;

                        markup.push("<option value='"+area_id+"'>");
                        markup.push(label);
                        markup.push("</option>");
                    }
                    alert(markup.join(""));
                    $('#quote-area').append(markup.join(""));
                }
                );

HTML:

<select name="area" id="quote-area"></select>

My alert gets run and I can see the markup has been constructed correctly. but nothing happens to my select box. I have tripple checked the selects ID.

I'm wondering if it's because the js file is loaded first then each subsequent html p开发者_开发技巧age is ajaxed into the DOM (jQuery mobile functionality). So when the javascipt is downloaded the select box doesn't exist yet?

Can anyone help me with this? Do I need to use some sort of live event?

UPDATE:

I've also tried using the live query plugin because I'm almost positive it because the list isn't part of the DOM when the script is loaded. But still no luck.

 $('#quote-area').livequery(function(){
     $(this).append($("<option></option>").attr("value",area_id).text(label));
 });

Have you tried

$(document).ready(function() { whatever(); });

This should make the code run after the page is loaded

If you are putting the target select box on the page through an ajax request, you should execute your code in the ajax onsuccess event. the document ready event is fired when the 'static' page is loaded, not when all ajax requests have been processed.

With JQM you need to bid it to the page events AS PER:

Important: Use $(document).bind('pageinit'), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

Link here:http://jquerymobile.com/demos/1.2.0/docs/api/events.html