2009-07-17 2 views
1

이것은asp.net JQuery .hover 이벤트 "개체 예상"오류를 제공합니다.

내 .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 속성이 제대로 적용되지만 단추를 맴 돕니 다 가면 "<script type="text/javascript">"가 시작되는 위치 인 "Object Expected"Line 11 (IE8 다른 브라우저는 표시되지 않음)이라는 오류가 발생합니다.

내가 무엇을 잘못하고 있는지에 대한 단서가 있습니까?

  1. $ (this) .hover $ ('.ui-button')이어야합니다. 처음에는을 가리 키지 만 $ (".ui-button")으로 입력했습니다. 호버 유의 사항 중복 견적!

  2. 내 .master 페이지에서 다음과 같이 asp.net 자바 스크립트 관리자를 사용하여 내 자바 스크립트를 선언하고 있습니다.

문제점은 스크립트 선언 내 자바 스크립트 코드 블록 아래!.

결국 자바 스크립트와 코드 블록이 비슷하게 보이고 모든 것이 잘 작동합니다.

<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> 
+0

$ (this) .hover (...). 이 맥락에서 이것은 무엇입니까? 단추에만 적용하거나 문서에 적용하려고합니까? 오식? –

답변

3

에 한번이 당신의 코드를 변경 .... 나는 "이"당신이 코드 줄을 사용할 때 타겟팅 된 컨텍스트를 가지고 있다고 생각하지 않습니다

$(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).hover(function() { 

시도 ...

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

과거에 "ui-button"을 사용 했었지만 작은 따옴표 대신 큰 따옴표를 사용했습니다! 또한 내 jquery 선언 위에 위의 JavaScript 코드를 가지고, 또한 신속한 응답을 주셔서 감사합니다 –

+0

큰 따옴표도 작동합니다, 여기에 열쇠입니다. .ui-button " –

1

이렇게하면 원하는 것을 무엇보다 많이 줄 수 있습니까?

위의 어딘가에 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"); 
     }); 
}); 
1

현재 코드 스 니펫에서 $ (this)는 $ (document)를 나타냅니다.이것을보십시오 :

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

이제 $ ('.ui-button')은 당신이 원하는 것을 말합니다.