title: cannot load ajax content on superslides jquery plugin
body: <p>i am quite a newbie to jquery,
  Actually i am using Superslides plugin <a href="http://nicinabox.com/superslides" rel="nofollow">Superslides</a></p>
  
  <p>for background and using a div in front to load some other page using ajax.
  Now the problem is that when i load the page eg. clients page with jquery ajax method it loads fine but then the main page navigation stops working. I mean List items which lets users move to next slide dosen't work.
  Maybe the list items in clients page is conflicting with the main page list items as i have been using Li to navigate main page from back slide to next slide.
  here is my code </p>
  
  <p>This is how i set up click binding with Li navigation </p>
  
  <p>the jquery code for slide</p>
  
  <pre><code>        $(document).ready(function () {
          $('.mainMenuListItem').click(function () {
              var currentThumbSel = $(this).attr("data-id");
              $('.slides-pagination a:nth-child(' + currentThumbSel + ')').click();
  
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>and the html navigation code is</p>
  
  <pre><code> &lt;div id="mainMenuStrip"&gt;
      &lt;ul id="mainMenuList"&gt;
          &lt;li class="mainMenuListItem" id="homeMenuListItem" data-id="1"&gt;HOME |&lt;/li&gt;
          &lt;li class="mainMenuListItem" data-id="2"&gt;ABOUT |&lt;/li&gt;
          &lt;li class="mainMenuListItem" id="clientsMenuListItem" data-id="3"&gt;CLIENTS |&lt;/li&gt;
          &lt;li class="mainMenuListItem" data-id="4"&gt;HOW WE WORK | &lt;/li&gt;
          &lt;li class="mainMenuListItem" data-id="5"&gt;OUR PROJECTS |&lt;/li&gt;
          &lt;li class="mainMenuListItem" data-id="6"&gt;DOWNLOAD TOOLS |&lt;/li&gt;
          &lt;li class="mainMenuListItem" data-id="7"&gt;CONTACT&lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And now the clients page code is</strong> </p>
  
  <pre><code>&lt;style&gt;
      #clientsList {
          list-style-type: none;
          width: 810px;
          height: 460px;
  
          margin: 0px;
          padding: 0px;
      }
  
          #clientsList li {
              float: left;
              height: 150px;
              margin-left: 4px;
              margin-top: 7px;
              width: 265px;
              background-color: black;
              cursor: pointer;
          }
  
      body {
          margin: 0px;
      }
  
      .overlayClient {
          position: absolute;
          height: 150px;
          width: 265px;
          z-index: 2;
          background-color: red;
          opacity: 0.7;
          display: none;
      }
  
      .informationZoom {
          color: white;
          font-family: verdana;
          font-size: 51px;
          margin-left: 115px;
          float: left;
          font-weight: bold;
          margin-top: 38px;
      }
  &lt;/style&gt;
  
  &lt;script&gt;
      $(document).ready(function() {
  
          //$('#clientsList&gt;li').mouseenter(function() {
          //    $(this).find(".overlayClient").fadeIn(500);
  
  
  
  
          //});
  
      });
  
      $(document).ready(function () {
  
          //$('#clientsList&gt;li').mouseleave(function () {
          //    $(this).find(".overlayClient").fadeOut(500);
  
  
  
  
          //});
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;ul id="clientsList"&gt;
      &lt;li&gt;
  
          &lt;div class="overlayClient"&gt;&lt;span class="informationZoom"&gt;+&lt;/span&gt;&lt;/div&gt;
          &lt;img src="images/clients/eaSports.jpg" /&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;div class="overlayClient"&gt;&lt;span class="informationZoom"&gt;+&lt;/span&gt;&lt;/div&gt;
          &lt;img src="images/clients/eaSports.jpg" /&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;div class="overlayClient"&gt;&lt;span class="informationZoom"&gt;+&lt;/span&gt;&lt;/div&gt;
          &lt;img src="images/clients/eaSports.jpg" /&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;div class="overlayClient"&gt;&lt;span class="informationZoom"&gt;+&lt;/span&gt;&lt;/div&gt;
          &lt;img src="images/clients/eaSports.jpg" /&gt;
  
      &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>And here is the Ajax Load method</strong> </p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
  
          $('#clientsMenuListItem').click(function () {
  
              $('#clientsAjaxContainer').load('clients.html'); 
          });
      });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>you can see that clients page also contains li, maybe some clash with Li??</strong>
  Please help me on this.
  thanks.</p>