I am trying to build a simple menu using jquery and it won't work. I'm getting a NaN error when trying to get the id and class of this. The elements in question have both an id and a class. What's going on?
$(document).on("click", function()
{
if($(this).attr("class") != "userOptButtons" && $(this).attr("id") != "usernameDisplay")
$("#userMenu").animate({"top": "-198"});
});
because this refers to the document object, if you want to target the actual element clicked then use event.target
$(document).on("click", function (e) {
if (!$(e.target).hasClass("userOptButtons") && e.target.id != "usernameDisplay") {
$("#userMenu").animate({
"top": "-198"
});
}
});
document object, this inside the event handler will refer to the document object. The event handler will receive the event object as an argument which will have a property called target which will refer to the actual element that was clicked.$(this) is referencing "document", the entire DOM, not your menu item that is clicked.
Unless you want to handle clicks on anything in the DOM in a single event handler, you're probably better off with an event handler just for your menu. Say each item in your menu has the same class name, "menuitem", then you could do something like this:
$('.menuitem').on('click', function (e) {
// now you can use $(this) in here to reference the item clicked
// plus everything else here can be custom just for your menus
}
If you're going with a single handler, as shown in your existing code, you need to reference the item clicked instead like this instead of using $(this):
$(e.target)
See http://api.jquery.com/event.target/ for more details.
you could also use this syntax this adds the on click event only to the DOM objects with an id of "usernameDisplay" and a class of "userOptButtons"
$("#usernameDisplay .userOptButtons").on("click", function () {
$("#userMenu").animate({
"top": "-198"
});
});
$(document).find(".userOptButtons") ? why not just $(".userOptButtons")