Q:

Jquery and Asynchronous Methods in popup.html

I'm playing around with building chrome extensions. I'm currently testing out the popup.html functionality when you click on the icon in the tool bar.
However I'm having a difficult time trying to wrap my head around using jquery in conjunction with the asynchronous methods of chrome.* apis. Maybe someone can elaborate further for me?
Scenario
popup.html contains buttons that interact with the current tab, The button's href is generated based on the current tab's url + additional text from an array. Using jQuery, I have a $("button").click(); inside of a document is ready. However these two do not seem to play nicely. Everything except for the jQuery stuff works.
example.
var the_current_url = '';
var url_addition = {
    "button 1" : "/home",
    "button 2" : "/about",
    "button 3" : "/content"
}

function getCurrentURL(currentURL) {

if(currentURL) {

    var scheme = currentURL.match(/^https?:\/\//i);
    var newURL = '';

    currentURL = currentURL.substring( scheme[0].length, currentURL.length );
    currentURL = currentURL.substring( 0, currentURL.indexOf("/") );

    the_current_url = newURL.concat(scheme[0], currentURL);

}

return true;
}

function buildButtons() {

var new_code = "<ul>\n";

// Generate the <li>
for (var key in url_addition) {

    new_code = new_code.concat("<li><a href=\"",
        the_current_url.concat(url_addition[key]),
        "\" title=\"",
            url_addition[key],
            "\">",
            key,
            "</a></li>\n");
}

new_code = new_code.concat("</ul>");

return new_code;
}

// Get the Current URL and build the new url
chrome.tabs.query({

    'active': true

    }, function(tab) {

    var currentURL = tab[0].url;

    // Pass the Current URL to bb_current_url via Function
    getCurrentURL(currentURL);

    // add the popup buttons
    document.getElementById("button-container").innerHTML = buildButtons();

});

$(document).ready(function() {

// Clicked on buttons
$("a").parents("#button-container").click(function() {
    console.log("test" );
});

});

I'm able to get the current tab's url and build the buttons with the proper links, however when it comes to the jquery click action don't work. It seems like the jquery stuff happens before the button-container's buttons are created. So that the $("a")'s click doesn't return any output to the console.log. Anyone know how I'm suppose to correctly use chrome's api with jquery in this instance?

A:

This has nothing to do with jQuery - the same problem would occur with plain JS as well.
Basically, you need to make sure that:

The links are inserted into the DOM only when it is ready (so your button-container is present).
The behaviour is attached to the links after they have been inserted into the DOM.

You can change your code so that the links are inserted inside of $(document).ready(...) (to ensure the button-container is already there) and the event-handlers are registered right after inserting the links (to ensure that the links are present in the DOM).
E.g.:
/* Original comments omitted for brevity */
$(document).ready(function () {
    /* The DOM is ready, so `#button-container` is guaranteed to be present */
    chrome.tabs.query({ active: true } , function (tabs) {
        var currentURL = tabs[0].url;
        getCurrentURL(currentURL);
        $('#button-container').html(buildButtons());

        /* Place this inside the callback to ensure the links are present */
        $('a').parents('#button-container').click(function() {
            console.log('test');
        });
    });
});

BTW, your $('a').parents('#button-container') will resolve to #button-container (not to the children as). If I am not mistaken, you want to target all as that are inside #button-container and not #button-container itself.
To achieve this change your expression to:
$('#button-container a').click(function () {...});

