Hover over particular div element?

ChrisG

Alrighty so I'm trying to add a 1-5 star rating system directly into my table. So far I have it displaying the 5 stars as follows:

[code]






[/code]


The ratings_stars style looks like this:

[code]
.ratings_stars {
background: url('star_blank.png') no-repeat;
float: left;
height: 28px;
padding: 2px;
width: 32px;
}
[/code]

Finally the original code for hovering and clicking on these elements is this:
[code]
$(document).ready(function() {
$('.ratings_stars').hover(

// Handles the mouseover

function() {

$(this).prevAll().andSelf().addClass('ratings_over');


},

// Handles the mouseout

function() {

$(this).prevAll().andSelf().removeClass('ratings_over');

}

);
//send ajax request to rate.php
$('.ratings_stars').bind('click', function() {

var id=$(this).parent().attr("id");
var num=$(this).attr("class");
var poststr="id="+id+"&stars="+num;
$.ajax({url:"rate.php",cache:0,data:poststr,success:function(result){
document.getElementById(id).innerHTML=result;}
});
});


});
[/code]

So how would I go about converting that code into something that lets the hover/click functions work inside datatables?

allan

Use a delegated event: http://datatables.net/faqs#events

Allan

ChrisG

Thanks I'll try some stuff

ChrisG

Well after trying some stuff, I'm still totally lost. :( Any other way to nudge me in the right direction?

ChrisG

What would the function look like? How could I check if the mouse is hovering over a particular div element instead of a row? I can't seem to find any documentation on that... as far as I know, you can only do like "#example tbody tr"... that gets the row... but I need the specific div inside the row. How would I call that?

My hover/click scripts work fine outside of the datatable but it just isn't doing anything once inside.

allan

[code]
$('#example tbody').on( 'mouseover', 'div', function () {
...
} );

$('#example tbody').on( 'mouseout', 'div', function () {
...
} );
[/code]

Allan

ChrisG

Awesome! Thanks a lot. Where could I have found this information?

I was actually wanting to only hover over a particular div class but I actually figured that out on a guess that it was like 'div.class' and that worked. :)

allan

jQuery documentation: http://api.jquery.com/on/ . Using delegated events is good for live DOM documents.

Allan