2014-11-17 2 views
0

여기에 작동하는 내용은 다음과 같습니다 여기JQuery와의 js 파일 내에서 요소를 선택하지

<head> 
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script> 
<script type="text/javascript"> 
function getElemWidth(){ 
    var x = $("#menuDiv").width(); 
    alert(x); 
} 
</script> 
</head> 
<body onLoad="getElemWidth()" /> 
<div id="menuDiv" style="width:250px" /> 
</body> 

무엇을 작동하지 않는 것 "common.js를"의

<head> 
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/common.js"></script> 
</head> 
<body onLoad="getElemWidth()" /> 
<div id="menuDiv" style="width:250px" /> 
</body> 

내용 :

function getElemWidth(){ 
    var x = $("#menuDiv").width(); 
    alert(x); 
} 

두 경우 모두 함수를 호출 중입니다. 두 경우 모두 jquery를 사용할 수 있습니다 (예 :

x = $(window).width(); 

). 웬일인지 .js 포함 파일에서 문서 요소를 가져올 수 없습니다. 내가 빠진 것이 있습니까?

나는 심지어 "common.js를"다음이 권리를 추가

은 다음과 같습니다 완벽하게 잘 작동

<script type="text/javascript"> 
    $(document).ready(function(){ 
    alert($('#menuDiv').width()); 
    }); 
    </script> 

합니다. menuDiv가 나타나는 동일한 파일 내에서 #menuDiv를 참조 할 수 있지만 포함 된 javascript 파일에서는 참조 할 수 없습니다. 이게 정상인가?

+3

추가 태그 – ajmajmajma

+0

그래, 내가 그것을 복사 할 때 실수 있었을 것입니다. 그건 내 실제 코드가 아니야. 함수가 호출되기 때문에 그것이 아닙니다. –

+0

'body' 및'div' 태그 **는 자동 닫힘이 아닙니다 **; 그게 문제가 될 수 있니? – PeterKA

답변

1

해야 문제가 있다는 것입니다 DOM은 아마 그렇지 않을 것이다. jQuery가 작동 할 준비가되었습니다. DOM에서 작동하는 가장 안전한 지점은 document is ready 이후입니다. 페이지가로드되었지만 완전히 렌더링되지는 않았습니다. 귀하의 common.js를 정말 다음과 같아야합니다

function getElemWidth(){ 
    var x = $("#menuDiv").width(); 
    alert(x); 
} 

$(document).ready(function(){ 
    getElemWidth(); 
}); 

그리고이처럼 HTML :

<head> 
    <script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script> 
    <script type="text/javascript" src="scripts/common.js"></script> 
</head> 
<body> 
    <div id="menuDiv" style="width:250px"></div> 
</body> 
1
<head> 
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/common.js"></script> 
</script> <-- this is wrong, remove this extra tag 

업데이트 질문에 따라 :

준비 jQuery를 DOM 내에서 함수를 호출해야합니다

$(function(){ 
    getElemWidth(); 
}); 

및 HTML

<head> 
    <script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script> 
    <script type="text/javascript" src="scripts/common.js"></script> 
</head> 
<body> <!-- remove onload --> 
    <div id="menuDiv" style="width:250px" /> 
</body> 
+0

jQuery.min.js 파일 바로 아래에 jQuery 라이브러리를 추가 할 위치가 jQuery 라이브러리이다. –

+0

@MarcelMarino 네, 좋습니다. – thecodeparadox

+0

여분의 것는 내가 그것을 복사했을 때 우연히 거기에 넣었다. 그건 내 실제 코드가 아니야. 함수가 호출되기 때문에 그것이 아닙니다. 이를 반영하기 위해 질문을 업데이트했습니다. 어떤 다른 아이디어가 될 수 있을까요? –

관련 문제