title: jquery ui issues with ajax's dynamic generated content
body: <p>i use ajax to get the main content of the web app i'm working on; the problem is that i'd like to implement some widgets from jquery ui but that messes with the ajax script.</p>
  
  <p>I have an Index.php page with a #mainContent DIV in it where ajax reply gets displayed once retrieved.</p>
  
  <p>This is the ajax script i wrote:</p>
  
  <pre><code>$(function() {
      var newHash      = "",
          $mainContent = $("#mainContent"),
          $pageWrap    = $("#contentCenter"),
          $mainMenu = $("#topMenu li a"),
          baseHeight   = 0,
          $el;
  
      $pageWrap.height($pageWrap.height());
      baseHeight = $pageWrap.height() - $mainContent.height();
  
      $mainMenu.on("click", function() {
          window.location.hash = $(this).attr("href");
          return false;
      });
  
      $(window).bind('hashchange', function(){
  
          newHash = window.location.hash.substring(1);
  
          if (newHash) {
              $mainContent
                  .fadeOut(200, function() {
                      $mainContent.hide(function() {
                          $(".loader").show();
                          var page = newHash;
                          var data = 'page=' + page;
                          $.ajax({
                                  url: "main_content/action.php", 
                                  type: "POST",       
                                  data: data + "&amp;request=ajax",
                                  cache: false,
                                  success: function (html) {
                                          $mainContent.html(html);
                                          if ($mainContent.find("img").length &gt; 0) {
                                                          $("#mainContent img").on('load', function() {
                                                                  $(".loader").hide();
                                                                          $mainContent.fadeIn(200, function() {
                                                                          $pageWrap.animate({
                                                                          height: baseHeight + $mainContent.height() + "px"
                                                                          }, 300);
                                                                      });
  
                                                              $mainMenu.removeClass('selected');
                                                              $('a[href="' + newHash + '"]').addClass('selected');
                                                              return false
  
  
                                                          });
                                          }
  
                                          else {
  
                                              $(".loader").hide();
                                                                  $mainContent.fadeIn(200, function() {
                                                                  $pageWrap.animate({
                                                                  height: baseHeight + $mainContent.height() + "px"
                                                                  }, 300);
                                                              });
  
                                                      $mainMenu.removeClass('selected');
                                                      $('a[href="' + newHash + '"]').addClass('selected');
                                                      return false
  
                                              }   
                                    }
                              });
                      }); 
                  });  
          };
  
      });
  
      $(window).trigger('hashchange');
  
  });
  </code></pre>
  
  <p>Now the problem is that if i include the jquery ui script at the top of the index.php page the ajax script doesn't work anymore it doesn't even make the call(checked with firebug).</p>
  
  <p>The order of the includes are:<br>
  jquery<br>
  jquery ui<br>
  all the html<br>
  my ajax script<br></p>
  
  <p>i can't understand how the jquery script could interfere with my script.
  Any suggestions?
  Thanks</p>
  
  <p>edit: if i include the jquery ui script at the bottom of the loaded content where i need to use it the jquery ui widget works and ajax only works once(it loads the content checking the hash when you reach the page but if you click on any menu entry it won't work).</p>