Converting current function for future elements

Question

Trying to make this (works for first page):

$(".text").not(".active a").hover(function(){

apply to ajaxify loaded elements.

Tried:

 $(document).on("hover",".text:not(.active a)",function(){

Doesn't work.

Am I missing something?

EDIT Let me add that the structure is as follows:

 <ul id="static-bar" class="nav navbar-nav navbar-right">
   <li class="active">
     <div data-hoverLeft="home" class="active-tail-top tail-and-point"></div>
     <div data-hoverLeft="home" class="active-tail-bottom tail-and-point"></div>
     <a id="home" class="text" href="index.html">HOME</a>
     <div data-hoverRight="home" class="active-point-top tail-and-point"></div>
     <div data-hoverRight="home" class="active-point-bottom tail-and-point"></div>
   </li>
   <li>
     <div data-hoverLeft="whatWeDo" class="tail-top-gray tail-and-point"></div>
     <div data-hoverLeft="whatWeDo" class="tail-bottom-gray tail-and-point"></div>
     <a id="whatWeDo" class="text" href="what-we-do.html">WHAT WE DO</a>
     <div data-hoverRight="whatWeDo" class="point-top-gray tail-and-point"></div>
     <div data-hoverRight="whatWeDo" class="point-bottom-gray tail-and-point"></div
   </li>
 </ul>

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 divs changes when you hover over the a tag. This hover effect doesn't work past the first page when I use the $.hover() method, and not at all when I use $.on().

Felix · Accepted Answer · 2014-03-28T01:21:11.830

1

Try to use:

$(document).on("hover",".text:not(.active) a",function(){

Based on your added HTML markup, you need to select any anchor with class text which is staying inside a <li> that not has class active:

$(document).on("mouseover","li:not(.active) a.text",function(){
    $(this).addClass('red');
}).on('mouseout', "li:not(.active) a.text",function(){
    $(this).removeClass('red');
});

Fiddle Demo

edited Mar 28 '14 at 01:21

answered Mar 26 '14 at 16:37

Felix

37,892
8
43
55

Doesn't work, I added some extra markup above to illustrate the layout I'm working with. This selects for an anchor that is a child of the `.text` class, when I want to select for the `.text` class that isn't a child of the `.active` class. – Andy Foster Mar 27 '14 at 18:21

Kiran · Answer 2 · 2014-03-28T01:03:41.033

0

Try this:

$(document).on("mouseover","li:not(.active) a.text",function(){
  // your code goes here
});

edited Mar 28 '14 at 01:03

answered Mar 26 '14 at 16:37

Kiran

20,167
11
67
99

Doesn't work, I added some extra markup above to illustrate the layout I'm working with. This selects for an anchor that is a child of the `.text` class, when I want to select for the `.text` class that isn't a child of the `.active` class. – Andy Foster Mar 27 '14 at 18:22

Converting current function for future elements

2 Answers2