Событие щелчка jquery не запускается ... но если я добавлю в него окно предупреждения ...? проблема пузыря события?

Question

Это странная проблема.

У меня есть два всплывающих окна html, просто скрытые div, которые я делаю видимыми, удаляя класс css.Один запускается с главной страницы, второй запускается с div, который я делаю видимым.Это все прекрасно работает.Затем, когда я пытаюсь закрыть их, я делаю это: (из 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];
             }
         }
       });
   },

            ...

это не работает, НО, если я добавляю предупреждающий вызов:

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

ЭтоРаботает.Почему это внезапно сработало, когда я вставил окно оповещения?Любые идеи о том, что моя проблема может быть и как ее исправить?

(из 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;
        });
    }); 

Ссылка на проект: http://www.1luckypixel.com/PA_js_troubles/index.html Есть приличное количествокода, который распространяется на несколько файлов, прежде чем это всплывает.Сейчас у меня сжатые сроки, я должен предоставить сборку к концу дня, поэтому я загрузил проект в свое веб-пространство.Когда страница загрузится, щелкните треугольник в верхнем правом углу, чтобы открыть меню навигации, затем нажмите «магазин», затем нажмите на любой из элементов (откроется первое всплывающее окно) и нажмите «купить», чтобы открыть второй,Кнопка покупки в этом всплывающем окне не установлена, но кнопка возврата есть.Это якорь, который не запускается.
(Примечание: в настоящее время есть несколько вызовов json на удаленный сервер, которые не настроены на работу, это не влияет на проблему).

Answer 1

Для записи ... Это не работало, потому что я не добавлял функциональность кнопки в функцию обратного вызова load, я добавлял ее к поведению нажатия кнопки, открывшей всплывающее окно.

Я даже не думал проверять это (я был особенно сожжен в тот день) в основном потому, что это работало, когда я вставлял окно оповещения в функцию прослушивания щелчков ... это должно было быть предупреждением, оповещением коробка дала ему время для загрузки, но вместо этого привела меня к слепому союзнику, который подумал, что что-то не так в равномерном распространении ...

    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;
            });
        });
    });     
}

Answer 2

Просто дайте некоторое время ожидания, это даст странице некоторое время для полной загрузки ... тогда все события будут работать, но это создаст проблему производительности.

Answer 3

Попробуйте изменить var el = event.target; на var el = $(this);

А также удалите event.stopPropogation() и preventDefault() - просто добавьте return false в конце функции - это будет следовать стилю jQuery.