title: Converting current function for future elements
body: <p>Trying to make this (works for first page):</p>
  
  <pre><code>$(".text").not(".active a").hover(function(){
  </code></pre>
  
  <p>apply to ajaxify loaded elements.</p>
  
  <p>Tried:</p>
  
  <pre><code> $(document).on("hover",".text:not(.active a)",function(){
  </code></pre>
  
  <p>Doesn't work.</p>
  
  <p>Am I missing something? </p>
  
  <p><strong>EDIT</strong>
  Let me add that the structure is as follows:</p>
  
  <pre><code> &lt;ul id="static-bar" class="nav navbar-nav navbar-right"&gt;
     &lt;li class="active"&gt;
       &lt;div data-hoverLeft="home" class="active-tail-top tail-and-point"&gt;&lt;/div&gt;
       &lt;div data-hoverLeft="home" class="active-tail-bottom tail-and-point"&gt;&lt;/div&gt;
       &lt;a id="home" class="text" href="index.html"&gt;HOME&lt;/a&gt;
       &lt;div data-hoverRight="home" class="active-point-top tail-and-point"&gt;&lt;/div&gt;
       &lt;div data-hoverRight="home" class="active-point-bottom tail-and-point"&gt;&lt;/div&gt;
     &lt;/li&gt;
     &lt;li&gt;
       &lt;div data-hoverLeft="whatWeDo" class="tail-top-gray tail-and-point"&gt;&lt;/div&gt;
       &lt;div data-hoverLeft="whatWeDo" class="tail-bottom-gray tail-and-point"&gt;&lt;/div&gt;
       &lt;a id="whatWeDo" class="text" href="what-we-do.html"&gt;WHAT WE DO&lt;/a&gt;
       &lt;div data-hoverRight="whatWeDo" class="point-top-gray tail-and-point"&gt;&lt;/div&gt;
       &lt;div data-hoverRight="whatWeDo" class="point-bottom-gray tail-and-point"&gt;&lt;/div
     &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>The important things to note are that I apply the active class when I'm on that particular page.  Regardless, each link gets a tail and point using some CSS border trickery, and the border color of the sibling <code>div</code>s changes when you hover over the <code>a</code> tag.  This hover effect doesn't work past the first page when I use the <code>$.hover()</code> method, and not at all when I use <code>$.on()</code>.</p>