Assign a:hover to dynamically loaded content with JQuery

Question

I have a page that load contents using

$('#header').load('head.html'), but the links inside head.html cannot use my website.css because website.css loaded earlier or for another reason.

so I thought this $('a:hover').css('color','green'); but no success.

I can solve with tags but I dont want to do it.

Update:

base.html

<script> 
    $('#header').load('/restaurant{{ chosenRest }}.html'); //chosenRest=1,2..etc
</script>

<div id="accordion">
<div id="header" >   </div></div>

I have files like, restaurant1.html, restaurant2.html

restaurant1.html

<a href="/Giorgio"> Giorgio's </a>

website.css

a:hover {color:green};

now if I add something like <style> a:hover {color:green; } </style> to base.html it works, but I don't want to do that way.

update: Finally Solved

here what worked:

base.css I added a new class

.restaurant:a:hover {
      color:green;
}

restaurant1.html

<a href="/Giorgio" class="restaurant"> Giorgio's </a>

css has no issue with time of loading so it should use website.css and however by jquery `$('a').hover(function(){$(this).css('color','green');},function(){$(this).css('color','prev_one');});` — bugwheels94, Apr 16 '13 at 07:43
possible duplicate of [How do you add pseudo classes to elements using jQuery?](http://stackoverflow.com/questions/12740967/how-do-you-add-pseudo-classes-to-elements-using-jquery) — jbl, Apr 16 '13 at 07:48
Check your `CSS`. probably you have something like `#body a:hover{}` then you load your a in `#header`. Post `CSS` here for more info. — Narek, Apr 16 '13 at 07:49
CSS will be applied even to elements added after the page is loaded. There is something else going on, does your head.html contain an iframe or something funky like that? Can you post the contents of the head.html ? — xec, Apr 16 '13 at 07:50
@jbl The jquery here is confusing, but not really essential to the question. Not a duplicate (at least not of what you linked) — xec, Apr 16 '13 at 07:53
http://stackoverflow.com/questions/2053693/override-ahover-with-jquery is very relevant I think, I will implement that solution if I cant find any better. — Emmet B, Apr 16 '13 at 07:57
http://jsfiddle.net/narekmarkosyan/F8MYx/1/ as you can see here link hover works on delayed loaded html. Problem in your `HTML/CSS` structure. If you post it here answer will be found fast and **witout** jQuery. — Narek, Apr 16 '13 at 08:01
thanks @Narek, it makes clear sense, I think there may be difference between .load vs .html, I am preparing a jsfiddle now. — Emmet B, Apr 16 '13 at 08:04
Problem is what you cant add load in jsfiddle, because loaded file need to be on the same domain, but as I know load get data from addres and make `$().html()` so in jquery level it's same. — Narek, Apr 16 '13 at 08:19
@Narek both points are right, when I tried to add your .html() code, it did not work either. So I think there is a more general problem, I ll paste in a bit all the structure. — Emmet B, Apr 16 '13 at 08:20

Manishearth · Answer 1 · 2013-04-16T08:32:17.380

2

Use .on() with the mouseenter and mouseleave events and delegate the events:

$(document.body).on('mouseenter','a',function()
 {
  $(this).data("oldcolor",$(this).css('color')); //Store old color
  $(this).css('color','green');
 }).on('mouseleave','a',function()
 {
  $(this).css('color',$(this).data('oldcolor')); //retrieve old color
 }
)

Use data() to store the old color

Alternatively, you can do this with vanilla JS:

 document.styleSheets[0].insertRule('a:hover { color: green; }', 0);

Or, just add a:hover { color: green; } to a stylesheet, but you may not want to do that (this will be there from the start, whereas via JS you can choose when to add the rule)

edited Apr 16 '13 at 08:32

answered Apr 16 '13 at 07:52

Manishearth

14,882
8
59
76

-1 Plain CSS does this much better. And should work. The question is not about event handlers (as far as i can tell) – xec Apr 16 '13 at 07:54
`Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'data' ` ,`Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'css'` – Emmet B Apr 16 '13 at 07:55
@xec: Added alternate way. – Manishearth Apr 16 '13 at 07:56
1

@EmmetB: Fixed, sorry about that. – Manishearth Apr 16 '13 at 07:57
@xec: Which is why I gave my last solution. It depends if he wants control on when the rule is applied or not. – Manishearth Apr 16 '13 at 07:59
@Manishearth actually your second solution works. But it works only for changing background-color, not the color. Any idea? – Emmet B Apr 16 '13 at 08:29
@EmmetB: My mistake, fixed – Manishearth Apr 16 '13 at 08:32
@Manishearth that is what I was trying to say: background-color works, but color does not work. – Emmet B Apr 16 '13 at 08:37
@EmmetB: that depends on the rest of your stylesheet. You may need `!important` – Manishearth Apr 16 '13 at 08:38

score 0 · Answer 2 · answered Apr 16 '13 at 08:29

0

Probably CSS doesn't load when you make load. just add DOM ready for your load.

<script> 
$(function(){
    $('#header').load('/restaurant{{ chosenRest }}.html'); //chosenRest=1,2..etc
});
</script>

answered Apr 16 '13 at 08:29

Narek

3,813
4
42
58

Assign a:hover to dynamically loaded content with JQuery

2 Answers2