asp.net JQuery .hover 事件给出“预期对象” 错误

Question

这就是我

在我的 .master 页面上的内容，我有以下内容

<script type="text/javascript">
$(document).ready(function() {
    $(this).hover(function() {
        $(this).addClass("ui-state-hover");
    },
        function() {
            $(this).removeClass("ui-state-hover");
        }
    ).mousedown(function() {
        $(this).addClass("ui-state-active");
    })
    .mouseup(function() {
        $(this).removeClass("ui-state-active");
    });
});

，我的 asp.net 按钮声明如下

<asp:button runat="server" id="cmdSubmitShipmentRequest" cssclass="ui-button ui-state-default ui-corner-all" text="Submit" />

预期的行为是，每当鼠标指针悬停在任何按钮内外时，都会添加和删除上面声明的 css 类。 目前，默认的 css 属性正确应用，但每当我将鼠标悬停在按钮上或移出按钮时，我都会收到以下错误“Object Expected”第 11 行（IE8 其他浏览器不显示任何内容），这是 "

关于我可能做错了什么的任何线索吗？

编辑答案

---

I was doing two things wrong

1. 我使用的 $(this).hover 应该是 $('.ui-button').hover 我最初使用的，但我将其输入为 < strong>$(".ui-button").hover 注意双引号！

2. 在我的 .master 页面上，我使用 asp.net javascript 管理器声明我的 javascript，如下所示

问题是我的 javascript 代码块下面有脚本声明！

最后，这就是 javascript 和代码块的样子，并且一切都按预期运行良好。

<asp:scriptmanager id="scriptManager" runat="server">
    <scripts>
        <asp:scriptreference path="~/javascript/jquery-1.3.2.min.js" />
        <asp:scriptreference path="~/javascript/jquery-ui-1.7.2.custom.min.js" />
        <asp:scriptreference path="~/Javascript/thickbox.js" />
    </scripts>
</asp:scriptmanager>

 <script type="text/javascript">
     $(document).ready(function() {
         $('.ui-button').hover(function() {
             $(this).addClass("ui-state-hover");
         },
            function() {
                $(this).removeClass("ui-state-hover");
            }
        ).mousedown(function() {
            $(this).addClass("ui-state-active");
        })
        .mouseup(function() {
            $(this).removeClass("ui-state-active");
        });
     });
</script> 

Answer 1

尝试将您的代码更改为此...

$(document).ready(function() {
    //SELECT THE .ui-button CLASS INSTEAD OF this
    $('.ui-button').hover(function() {
        $(this).addClass("ui-state-hover");
    },
                function() {
                    $(this).removeClass("ui-state-hover");
                }
        ).mousedown(function() {
            $(this).addClass("ui-state-active");
        })
        .mouseup(function() {
            $(this).removeClass("ui-state-active");
        });
});

我不相信“this”具有您使用这行代码时所定位的上下文...

$(this).hover(function() {

尝试将上面的行替换为以下行...

$('.ui-button').hover(function() {

Answer 2

这会给你更多你想要的东西吗？

另外，请确保您在上面的某个位置包含了 jquery 库。

$(document).ready(function() {
    $('.ui-button').hover(function() {
        $(this).addClass("ui-state-hover");
    },
                function() {
                    $(this).removeClass("ui-state-hover");
                }
        ).mousedown(function() {
            $(this).addClass("ui-state-active");
        })
        .mouseup(function() {
            $(this).removeClass("ui-state-active");
        });
});

Answer 3

在当前的代码片段中，$(this) 指的是$(document)。 试试这个：

$(document).ready(function() {  
    $('.ui-button').hover(function() {  
        $(this).addClass("ui-state-hover");  
    }, <rest of code omitted>
}

现在 $(this) 引用 $('.ui-button')，这就是你想要的。