2017-01-24 7 views
1

$ (document) .ready (function())에 대한 많은 것을 읽었습니다. 유용 할 때 일 때 유용합니다. 따라서 일반적으로 $ $를 작성합니다. ?

: 악마, 왜이 너무 간단한 경우에 KO입니다 방금 ​​르 $ (문서 연기하는 경우가 .... 그것을 완벽하게

코드가 작동하는 이유

하지만, 내부 준비 (함수()

<?php 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script defer> 
      $(document).ready(function(){ 
       //alert('ready boy'); 
      function changeText(id) { 
       id.innerHTML = "Ooops!"; 
      } 
      }); 
     </script> 
    </head> 
<body> 

<h1 onclick="changeText(this)">Click on this text!</h1> 



</body> 
</html> 
+3

는'changeText'은'준비()'의 외부에서 액세스 할 수 없습니다. 따라서 작동하지 않습니다. 이벤트를 바인드하려면'on ('click')'을 사용하십시오. – Tushar

+0

문서 준비 래퍼 (wrapper) 안에 메소드를 넣을 필요가 없습니다. – epascarello

+0

이상적인 복제본은 아니지만 대답은 동일합니다. 함수는 해당 범위에서만 사용할 수 있습니다 (이 경우에는 준비된 문서 내부). –

답변

0

범위 문제입니다. 오래된을 사용할 때이벤트 속성 호출하는 함수는 window의 범위에서 정의해야합니다. 귀하의 코드 예제에서 jQuery의 준비 처리기 범위 내에서 정의했습니다.

<script> 태그 내에 직접적으로 함수를 이동 중 하나를 수 문제를 해결하고, 따라서 window 범위 미만 : 바람직

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script defer> 
 
    $(document).ready(function() { 
 
     console.log('ready boy'); 
 
    }); 
 

 
    function changeText(id) { 
 
     id.innerHTML = "Ooops!"; 
 
    } 
 
    </script> 
 
</head> 
 
<body> 
 
    <h1 onclick="changeText(this)">Click on this text!</h1> 
 
</body> 
 
</html>

대안

및에는 제거 할 수 on* 이벤트 속성을 사용하고 대신 눈에 잘 띄지 않는 자바 스크립트를 사용하여 이벤트 핸들러를 연결하십시오.

(210)

1

첫째, 나는 코드를 유지하기 어려울 수 있으므로 인라인 자바 스크립트를 사용에 대해 조언을 것입니다. 따라서 명명 된 함수가 필요하지 않습니다.

두 번째로 명명 된 함수는 전역 적으로 액세스 할 수 없습니다.이 함수는 인라인 코드에서 찾고자하는 함수입니다. 여기

는 데모이 접근 수있는 방법을 보여주고있다 :

$(document).ready(function(){ 
 
    //alert('ready boy'); 
 
    $('h1.changeit').on('click', function() { 
 
     $(this).text('Ooops!'); //.html('Ooops!') 
 
     //OR this.innerHTML = "Ooops!"; 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1 class="changeit">Click on this text!</h1>