jQuery.hover on SharePoint Web Part not working

Question

I am working on a navigation bar that is driven off of a SharePoint List. Everything is working as expected except my .hover event.

EDIT: I changed my line of code to this:

$('table').hover(function () { alert(this.id); });

I noticed that whenever I hovered over my Header Tags, the alert message was blank. This leads me to believe that's it's not even returning the ID. However the ID gets returned for the parent element (<table>).....I've got to be doing something stupid.

When I have this, it works:

$(document).hover(function () { alert(); });

However, when I have this, nothing happens:

$("#Header0").hover(function () { alert(); });

Any idea's as to why this doesn't work in SharePoint but works if I just do a regular web application?

Here is all my code:

    ///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
////////////////////////////////////////EVERYTHING BELOW THIS LINE IS GOOD TO    GO/////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
//Print Headers to Screen. This will drive the core functionalty of the navpart
var siteUrl = '/sites/dev';
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
theCounter = 0;
var Headers = new Array();
var getCurrentElementId = null;
function retrieveListItems() {
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('myList');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),  Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    theCounter += 1;
    Headers[theCounter - 1] = oListItem.get_item('Title');
}
var HeaderDisplay = _.uniq(Headers);
for (var i = 0; i <= HeaderDisplay.length - 1; i++) {
    $('#TableElement').append("<th id=Header" + i + ">" + HeaderDisplay[i] + "::::::" +  "</th>");
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

    ///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
 ////////////////////////////////////////EVERYTHING ABOVE THIS LINE IS GOOD TO     GO/////////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////


// You got the headers to print as expected. Right now you need to figure out how to get the current ID
// that the mouse is over. Try looking at another project you did where the mouse goes into the table header
// and the outline expands.


$("#Header0").hover(function () { alert(); });



//This should be the universal onmouseover event that will expose only links
//and values relavent to the selected header.

//$(document).ready(function onPageLoad() {
//    $().SPServices({
//        operation: "GetListItems",
//        async: false,
//        listName: "myList",
//        CAMLQuery: "<Query><Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where></Query>",
//        completefunc: function completeFunction(xData, Status) {
//            $(xData.responseXML).SPFilterNode("z:row").each(function () {
//                var Headers = "<th>" + $(this).attr("ows_Title") + "</th>";
//                $("#TableElement").append(Headers);
//            }); 
//        }
//    });
//});

Answer 1

Try doing something like this...

$('#TableElement').hover(function () {
$('#Header0').hover(function () {
    $('#Header2').append("<li>" + this.id + "</li>");
});
});

I suspect this isn't working because jQuery couldn't 'find' the ID. Once inside the parent, it should pick it up.