jQuery-여러 $ (문서) .ready…?


358

질문:

$(document).ready함수 와 함께 두 개의 JavaScript 파일로 링크하면 어떻게됩니까? 하나는 다른 하나를 덮어 쓰나요? 아니면 둘 다 $(document).ready불려지나요?

예를 들어

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js :

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js :

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});


두 통화를 하나의 통화로 결합하는 것이 가장 좋은 방법 $(document).ready이지만 내 상황에서는 불가능합니다.


답변:


350

모든 사람이 처형 되고 첫 선착순으로 선발됩니다 !!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

당신이 볼 수 있듯이 데모 서로 대체하지 않습니다

또한 한 가지 언급하고 싶습니다

대신에

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

이 단축키를 사용할 수 있습니다

jQuery(function(){
   //dom ready codes
});

66
또는 더 짧은 $ (function () {// dom ready codes}); api.jquery.com/ready
davehale23

217
$ (function () {// do stuff}); 처음으로 Google에 설명이 얼마나 어려웠습니까? $ (문서) .ready 통신하는 훨씬 더 너무 작은 용
매트 몬태그

56
간결하고 읽기 어려운 코드에 대한 투표는 테러에 대한 투표입니다.
FreeAsInBeer

10
바로 가기는 이점을 제공하지 않지만 난독 화를 유발합니다. 목표가 코드를 읽고 이해하고 유지하는 데 걸리는 시간을 "짧게"하는 것이라면 이러한 지름길이 먼 길을 안내 할 것입니다.
jononomo

3
바로 가기를 사용하는 것이 나쁜 경우, 하나는 사용해야합니다jQuery(document).ready(function(){ });
Memet 올슨

76

jQuery()통화는 실제로 응답해야합니다. 하나에서 예외가 발생하면 후속 (관련되지 않은) 호출은 절대 실행되지 않습니다.

이것은 구문에 관계없이 적용됩니다. 당신이 사용할 수있는 jQuery(), jQuery(function() {}), $(document).ready(), 당신이 원하는대로, 동작은 동일합니다. 초기 블록이 실패하면 후속 블록이 실행되지 않습니다.

타사 라이브러리를 사용할 때 문제가되었습니다. 한 라이브러리에서 예외가 발생했으며 후속 라이브러리는 아무것도 초기화하지 않았습니다.


2
이. 방금 문제를 좁히는 데 좋은 시간을 보냈습니다. 내 $(document).ready호출 중 하나 에서 오류가 발생하여 다른 $(document).ready함수가 호출되지 않았습니다. 그것은 나를 미치게했다.
스크롤 업

10
이것은 더 이상 사실이 아닙니다. jQuery 3.0부터 jQuery는 하나의 핸들러에서 발생하는 예외로 인해 이후에 추가 된 핸들러가 실행되는 것을 막지 않습니다. api.jquery.com/ready
라비 테자

31

$ (문서) .ready (); 다른 기능과 동일합니다. 문서가 준비되면로드됩니다. 문제는 여러 $ (document) .ready ()의 동일한 함수를 실행할 때가 아니라 여러 $ (document) .ready ()가 실행될 때 발생하는 문제에 관한 것입니다.

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

둘 다 정확히 동일하게 작동합니다. 유일한 차이점은 전자가 동일한 결과를 얻을 수 있다는 것입니다. 후자는 1 초의 빠른 속도로 실행되며 타이핑이 덜 필요합니다. :)

결론적으로 가능하면 1 $ (document) .ready ();

// 이전 답변

둘 다 순서대로 호출됩니다. 가장 좋은 방법은 그것들을 결합하는 것입니다. 그러나 가능하지 않은 경우 걱정하지 마십시오. 페이지가 폭발하지 않습니다.


^^ 사람들이 같은 기능을 여러 번 실행하고 여러 $ (document) .ready 's에서 다른 기능을 실행하는 데 혼란 스러울 수 있다고 생각하면서 내 편집. ^^ 그것이 도움이되기를 바랍니다.
Ed Fryed 1


9

둘 다 호출 될 것이며, 먼저 제공 될 것입니다. 봐 여기 .

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

산출:

문서 준비 2가 호출되었습니다!


2

스레드를 괴롭히지 말고 jQuery제안 된 구문 의 최신 버전에서는 다음과 같습니다.

$( handler )

익명 함수를 사용하면 다음과 같습니다.

$(function() { ... insert code here ... });

이 링크를보십시오 :

https://api.jquery.com/ready/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.