Hover over particular div element?

Hover over particular div element?

ChrisGChrisG Posts: 29Questions: 0Answers: 0
edited August 2013 in DataTables 1.9
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?

Replies

  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Use a delegated event: http://datatables.net/faqs#events

    Allan
  • ChrisGChrisG Posts: 29Questions: 0Answers: 0
    edited August 2013
    Thanks I'll try some stuff
  • ChrisGChrisG Posts: 29Questions: 0Answers: 0
    Well after trying some stuff, I'm still totally lost. :( Any other way to nudge me in the right direction?
  • ChrisGChrisG Posts: 29Questions: 0Answers: 0
    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.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    [code]
    $('#example tbody').on( 'mouseover', 'div', function () {
    ...
    } );

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

    Allan
  • ChrisGChrisG Posts: 29Questions: 0Answers: 0
    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. :)
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    jQuery documentation: http://api.jquery.com/on/ . Using delegated events is good for live DOM documents.

    Allan
This discussion has been closed.