2012-03-29 3 views
0

저는 jQuery에 익숙하지 않습니다. ColdFusion 페이지에서 "일반"JavaScript를 jQuery로 변환하고 있습니다. 페이지는 결과 세트를 기반으로 입력 필드의 페이지 및 수를 변경하는 저장 프로 시저에서 실행됩니다. 내 페이지에서 입력 태그는 다음과 같이 보입니다.jQuery가 cfm 페이지에서 document.ready없이 작동하지 않습니다.

<cfinput name="#trim(characteristic_id)#_fund" id="#trim(characteristic_id)#_fund" value="#fund#" size="11" onFocus="getCurrentValue(this)" onblur="checkChange(this,'c')"> 
<cfinput name="#trim(characteristic_id)#_benchmark" id="#trim(characteristic_id)#_benchmark" value="#benchmark#" size="11" onFocus="getCurrentValue(this)" onblur="checkChange(this,'c')"> 

onFocus 이벤트는 현재 값을 저장하고, 값이 변경된 경우 onBlur 이벤트 여부를 확인하고,이 경우 추가적인 프로세싱을위한 어레이에 저장한다.

개인적으로 jQuery가 이러한 종류의 처리에 매우 적합하다고 생각하며, 내가 주로 시도하고있는 주된 이유 중 하나입니다.

제 문제.

$("input").focus(function(){ 
    alert($(this).val()); 
}); 

간단하게,하지만 난을하려고 할 때, 아무것도, 아무것도 더 자바 스크립트 오류가 발생하지 : 지금은 함께 onFocus 이벤트 핸들러를 대체하고있다. 전혀 아무 일도 일어나지 않습니다. 그래서, 제가 작성한 다른 jQuery 코드는 모두 $(document).ready...을 사용했습니다. 그리고 그 코드를 사용했을 때 제대로 작동했습니다. 내가 읽은 것부터 DOM이 준비되기 전에 UI가 렌더링되었지만 그 문제를 합성하기 전에 coldfusion이 다른 모든 것보다 먼저 실행되고 있습니다.

내 질문은 이것입니다. 내 모든 jQuery 코드를 $(document).ready... 함수 안에 넣어야할까요, 아니면 다른 방법이 있을까요?

미리 감사드립니다.

+1

어쨌든 ''전에 jQuery를 페이지의 맨 아래로 이동 시키면,'$ (document) .ready'에 대해 걱정할 필요가 없습니다. 거기 도착. 그것을 시도하면 적어도 당신을 위해 그것을 배제 할 것입니다. –

+0

그래서 jquery를 '' 태그 아래로 움직이는 것이 jquery를 코딩하는 허용 된 방법입니까? 내가 말했듯이, 이것은 jquery를 사용하는 것에 대한 나의 첫 번째 진출이다. –

+1

아니요, jQuery 자체에 대한 참조를 포함하여 바로 위에 있습니다. [Html5 보일러 플레이트] (http : // html5boilerplate.co.kr) 귀하가 모범 사례를 현명하게 알고 싶다면 –

답변

4

처리기를 DOM 객체에 첨부하려면 $(document).ready() 또는 $(window).load()에 코드를 입력해야합니다. 즉, 처리 할 요소 뒤에로드되는 스크립트 블록의 호출 코드이며 작동해야하는 코드입니다. 그러나 준비 /로드 핸들러를 사용하는 것이 좋습니다.

DOM이로드 될 때까지 기다리지 않으면 요소가 아직 존재하지 않습니다.

원하지 않는 경우 모든 준비된 블록에 코드를 채울 필요는 없습니다. 여러 개의 $(document).ready() 블록을 가질 수 있습니다. 문서가로드되면 각각은 연속적으로 호출됩니다.

$(window).load(), 그런데 이미지와 같은 요소 자체가로드 될 때까지 기다립니다.

+1

그래서'$ (document) .ready (function() {$ ("input"), focus (...); $ ("input"). blur (...);}) $ (document) .ready (function() {$ ("input"). focus (...);}); $ (document) .ready (function() {$ ("input"). blur (...);});'도 허용됩니까? –

+1

예. 그것은 더 많은 오버 헤드가 있지만 작동합니다. 또한 두 개의'ready' 함수에서 범위가 같지는 않습니다. 코드가 관련이 없는지 여부는 중요하지 않습니다. –

+0

위의 Scott의 의견은 여전히 ​​jquery를 페이지 맨 아래로 이동하면서 적용됩니까? –

0

DOM을 조작해야하는 경우 코드를 $(document).ready() 안에 넣어야합니다.

.ready에 전달 핸들러()는 DOM이 준비 후 실행되도록 보장, 그래서 이것은 일반적으로 다른 모든 이벤트 핸들러를 연결하고 다른 jQuery 코드를 실행하는 가장 좋은 장소입니다.

관련 문제