Событие asp.net JQuery .hover выдает ошибку «объект ожидается» - PullRequest
Новая
       17

Событие asp.net JQuery .hover выдает ошибку «объект ожидается»

1 голос
/ 17 июля 2009

Это то, что у меня есть

На моей странице .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 по умолчанию применяются правильно, но каждый раз, когда я нахожу и нажимаю кнопку, я получаю следующую ошибку «Ожидаемый объект», строка 11 (в других браузерах IE8 ничего не отображается), с которой начинается "<script type="text/javascript">".

есть какие-либо подсказки относительно того, что я могу делать неправильно?

РЕДАКТИРОВАТЬ С ОТВЕТОМ

Я делал две вещи неправильно

  1. Я использовал $ (this) .hover должен был быть $ ('. Ui-button'). Hover , который у меня был изначально, но я набрал его как $ (". Ui-button"). Hover УВЕДОМЛЕНИЕ О ДВОЙНЫХ ЦИТАТАХ!

  2. На моей странице .master я объявляю свой javascript с помощью менеджера JavaScript asp.net следующим образом

проблема была в том, что у меня были объявления скрипта ниже моего блока кода 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>

Ответы [ 3 ]

3 голосов
/ 17 июля 2009

Попробуйте изменить код на этот .... 

$(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() {
1 голос
/ 17 июля 2009

В вашем текущем фрагменте кода $ (this) относится к $ (document). Попробуйте это: 

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

Теперь $ (this) относится к $ ('.ui-button'), что вам и нужно.

1 голос
/ 17 июля 2009

это даст вам больше того, что вы хотите?

также убедитесь, что вы включили библиотеку 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");
        });
});
...