Question

This is a strange problem.

I have two html pop-up windows, just hidden divs that I make visible by removing a css class. One is launched from from the main page, the second is launched from the div that I make visible. This all works great. Then when I try to close them I do this:
(from game_ui.js)

   setUpPopUp: function() {
       $(pop_up+" a").click(function(event) {
         event.stopPropagation();
         event.preventDefault();
         var el = event.target;
         if($(el).attr('href') == '#close') {
             $(pop_up).addClass('hidden');
             if(pop_up === pop_ups[1]) {
                 pop_up = pop_ups[0];
             }
         }
       });
   },

            ...

it doesn’t work, BUT if I add an alert call:

  setUpPopUp: function() {
                alert(pop_up);//it could be 'alert anything...'
                $(pop_up+" a").click(function(event) {
                   ...

It DOES work. Why would this suddenly work when I put an alert box in? Any ideas on what my problem might be and how to fix it?

(from shop.js)

    var setUpDetail = function(id, item) {
    $('#pop-up').load('html_elements/shop.html #gameShopItem', function() {
        $('#gameShopItem h3').append(item.name+" Description");
        $('#gameShopItem p.itemDesc').append(item.description);
        $('#gameShopItem p.itemEffect').append(item.effect);            
        gameUi.setPopUpReference(0);                
        gameUi.showPopUp();
        gameUi.setUpPopUp();
        $("#purchaseButton").click(function(event){
            event.preventDefault();
            $('#pop-up2').load('html_elements/shop.html #gameShopItemPurchaseDialog');
            gameUi.setPopUpReference(1);                
            gameUi.showPopUp();
            gameUi.setUpPopUp();
            //jQT.goTo("#gameShopItemPurchaseDialog", 'slide');
            return false;
        });
    }); 

Link to project:
http://www.1luckypixel.com/PA_js_troubles/index.html
There is a decent amount of code that is spread out over multiple files before this pops up. I’m on a tight deadline at the moment, I have to provide a build by the end of the day so I uploaded the project to my webspace. Once the page loads click the triangle in the top right corner to open the nav menu, then click “shop”, then click on any one of the items (this opens the first pop-up) and click “buy” to open the second. The buy button on that pop-up isn’t set up, but the back button is. That is the anchor that is not firing.
(Note: there are currently several of json calls to a remote server that aren’t set up to work, this doesn’t effect the issue at hand).

Answer 1

For the record…
This wasn’t working because I wasn’t adding the button functionality in the load call back function I was adding it to the click behavior of the button that opened the pop up.

I didn’t even think to check that (I was particularly burnt out that day) mostly because it was working when I put an alert box in the click listener function… this should have been a tip off, the alert box was giving it time to load, but instead it lead me down a blind ally thinking there was something wrong in the even propagation…

    var setUpDetail = function(id, item) {
    $('#pop-up').load('html_elements/shop.html #gameShopItem', function() {
        $('#gameShopItem h3').append(item.name+" Description");
        $('#gameShopItem p.itemDesc').append(item.description);
        $('#gameShopItem p.itemEffect').append(item.effect);            
        gameUi.readyPopUp();        
        $("#purchaseButton").click(function(event){
            event.preventDefault();
                            // added the popup window functionality to the call back function.
            $('#pop-up2').load('html_elements/shop.html #gameShopItemPurchaseDialog', function () {
                gameUi.readyPopUp();        
                return false;
            });
        });
    });     
}