为什么jQuery“ this”属性返回null？

Question

我正在尝试使用jquery构建一个简单的菜单，它将无法正常工作。 我得到一个NaN试图获得的ID和类时错误this 。 有问题的元素具有ID和类。 这是怎么回事？

   $(document).on("click", function()
    {
        if($(this).attr("class") != "userOptButtons" && $(this).attr("id") != "usernameDisplay")
            $("#userMenu").animate({"top": "-198"});
    });

Answer 1

因为this是指文档对象，所以如果要定位单击的实际元素，请使用event.target

$(document).on("click", function (e) {
    if (!$(e.target).hasClass("userOptButtons") && e.target.id != "usernameDisplay") {
        $("#userMenu").animate({
            "top": "-198"
        });
    }
});

Answer 2

$（this）引用的是“文档”，即整个DOM，而不是单击的菜单项。

除非您希望在单个事件处理程序中处理对DOM中任何内容的点击，否则最好只为菜单使用事件处理程序。 假设菜单中的每个项目都具有相同的类名称“ menuitem”，那么您可以执行以下操作：

$('.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
}

如果要使用单个处理程序（如现有代码所示），则需要引用单击的项目，而不是像这样，而不是使用$（this）：

$(e.target)

有关更多详细信息，请参见http://api.jquery.com/event.target/ 。

Answer 3

您还可以使用此语法，这会将on事件仅添加到ID为“ usernameDisplay”和类为“ userOptButtons”的DOM对象

$("#usernameDisplay .userOptButtons").on("click", function () {
        $("#userMenu").animate({
            "top": "-198"
        });   
});