Выберите параметры, которые не отображаются

Question

Я создаю приложение, в котором содержимое страницы изменяется и динамически заменяется с помощью AJAX (и hashchange jquery script). По какой-то причине в динамически измененном содержимом AJAX параметры формы выбора не отображаются. Пример здесь:

http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/#enter.php

Однако, если я запускаю страницу, без загрузки/изменения содержимого с помощью AJAX (удалить # метку в URL), то выберите элемент формы работы, как это должно быть.

http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/enter.php

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

$(function() { 

var newHash  = "", 
    $mainContent = $("#appContent"), 
    $pageWrap = $("#page-wrap"), 
    baseHeight = 0, 
    $el; 

$pageWrap.height($pageWrap.height()); 
baseHeight = $pageWrap.height() - $mainContent.height(); 

    $("nav").delegate("a", "click", function() { 
     window.location.hash = $(this).attr("href"); 
     return false; 
    }); 
    $("#buttonWrap").delegate("a", "click", function() { 
     window.location.hash = $(this).attr("href"); 
     return false; 
    }); 

$(window).bind('hashchange', function(){  
    newHash = window.location.hash.substring(1);   
    if (newHash) { 
     $mainContent 
      .find("#guts") 
      .slideToggle(500, function() { 
       $mainContent.hide().load(newHash + " #guts", function() { 
        $mainContent.slideToggle(500, function() { 
         $pageWrap.animate({ 
          height: baseHeight + $mainContent.height() + "px" 
         }); 
        }); 
        $("nav a").removeClass("current"); 
        $("nav a[href="+newHash+"]").addClass("current"); 

        //RE-FIRE OTHER SCRIPTS ON AJAX CONTENT LOAD 

        //Phone Field Format 
        $(function() { 
         $("#phone").mask("(999) 999-9999",{placeholder:" "}); 
        }); 

       }); 
      }); 
    };       
}); 

$(window).trigger('hashchange'); 

});

Answer 1

Ваш ответ с сервера выглядит правильно, но ваш элемент выбора все искалечен после вставки DOM. Я предполагаю, что load() + синтаксический анализатор является виновником. Попробуйте его с $.ajax, что-то вроде этого:

$(function() { 

var newHash  = "", 
    $mainContent = $("#appContent"), 
    $pageWrap = $("#page-wrap"), 
    baseHeight = 0, 
    $el; 

$pageWrap.height($pageWrap.height()); 
baseHeight = $pageWrap.height() - $mainContent.height(); 

    $("nav").delegate("a", "click", function() { 
     window.location.hash = $(this).attr("href"); 
     return false; 
    }); 
    $("#buttonWrap").delegate("a", "click", function() { 
     window.location.hash = $(this).attr("href"); 
     return false; 
    }); 

$(window).bind('hashchange', function(){ 
    newHash = window.location.hash.substring(1); 
    if (newHash) { 
     $mainContent 
      .find("#guts") 
      .slideToggle(500, function() { 
       $mainContent.hide(); 
       $.ajax({ 
        url: newHash, 
        dataType: 'html', 
        success: function(data) { 
         $mainContent.html($(data).find('#appContent').html()); 
         $mainContent.slideToggle(500, function() { 
          $pageWrap.animate({ 
           height: baseHeight + $mainContent.height() + "px" 
          }); 
         }); 
         $("nav a").removeClass("current"); 
         $("nav a[href="+newHash+"]").addClass("current"); 

         //RE-FIRE OTHER SCRIPTS ON AJAX CONTENT LOAD 

         //Phone Field Format 
         $(function() { 
          $("#phone").mask("(999) 999-9999",{placeholder:" "}); 
         }); 
        } 
       }); 
      }); 
    } 
}); 

$(window).trigger('hashchange'); 

}); 

EDIT: полный код ответа