Word press jquery 및 $ 기호 사용 방법
다음과 같은 jQuery 래퍼를 사용하는 WordPress 플러그인에 간단한 jQuery 스크립트가 있습니다.
$(document).ready(function(){
// jQuery code is in here
});
WordPress Dashboard에서 이 스크립트를 호출하여 jQuery 프레임워크가 로드된 후 로드합니다.
Firebug의 페이지를 확인하면 다음과 같은 오류 메시지가 계속 표시됩니다.
TypeError: $는 함수가 아닙니다.
$(표준)ready(function){
이 기능으로 스크립트를 랩해야 합니까?
(function($){
// jQuery code is in here
})(jQuery);
이 에러는 여러 번 발생하고 있습니다만, 어떻게 대처해야 할지 모르겠습니다.
어떤 도움이라도 주시면 감사하겠습니다.
기본적으로 Wordpress에서 jQuery를 큐잉할 때는 다음을 사용해야 합니다.jQuery,그리고.$는 사용되지 않습니다(다른 라이브러리와의 호환성을 위해).
고객님의 솔루션(포장function정상적으로 동작하거나 jQuery를 다른 방법으로 로드할 수 있습니다(단, Wordpress에서는 권장하지 않을 수 있습니다).
를 사용해야 하는 경우document.ready, 실제로 합격할 수 있습니다.$함수 호출:
jQuery(function ($) { ...
이것으로 해결할 수 있습니다.
jQuery(document).ready(function($){
//you can now use $ as your jQuery object.
var body = $( 'body' );
});
간단히 말하면, WordPress는 사용자가 하기 전에 자체 스크립트를 실행하여$다른 라이브러리와 충돌하지 않도록 합니다.WordPress는 모든 종류의 웹사이트, 앱, 그리고 물론 블로그에 사용되기 때문에 이것은 전적으로 타당하다.
문서 내용:
WordPress에 포함된 jQuery 라이브러리는 noConflict() 모드로 설정됩니다(wp-includes/js/jquery/jquery.js 참조).이는 WordPress가 링크할 수 있는 다른 JavaScript 라이브러리와의 호환성 문제를 방지하기 위한 것입니다.
noConflict() 모드에서는 jQuery의 글로벌 $숏컷을 사용할 수 없습니다.
이 솔루션은 나에게 효과가 있었다
;(function($){
// your code
})(jQuery);
폐쇄 내부로 코드를 이동하여 사용$대신jQuery
위의 솔루션을 https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma에서 찾았습니다.
...너무 많이 검색해서
var $=jQuery.noConflict();
$(document).ready(function(){
// jQuery code is in here
});
Ashwani Panwar와 Cysu의 답변: https://stackoverflow.com/a/29341144/3010027
$가 아닌 WordPress jQuery에서 사용되는 이유: https://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/
이렇게 충돌을 피할 수 있습니다.
var jq=jQuery.noConflict();
jq(document).ready(function(){
alert("Hi this will not conflict now");
jq('selector').show();
});
이것을 시험해 보세요.
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
</script>
또한 jQuery noConflict 모드를 사용하는 데 적합한 솔루션을 찾았습니다.
(function($){
$(document).ready(function(){
// write code here
});
// or also you can write jquery code like this
jQuery(document).ready(function(){
// write code here
});
})(jQuery);
이 솔루션은 TryVary.com에서 찾을 수 있습니다.
$ in function()을 전달해야 합니다.
<script>
jQuery(document).ready(function($){
// jQuery code is in here
});
</script>
$ sign로 jQuery음음음같 뭇매하다
jQuery(function(){
//your code here
});
jQuery 참조를 재확인합니다.여러 번 참조하거나 함수를 너무 일찍 호출했을 수 있습니다(jQuery가 정의되기 전).제 코멘트에 기재되어 있는 대로 jQuery 레퍼런스를 파일 맨 위(머리 부분)에 삽입하여 도움이 되는지 확인하실 수 있습니다.
jQuery의 캡슐화를 사용하면 이 경우 도움이 되지 않습니다.좀 더 예쁘고 티가 나는 것 같으니까 시도해 보세요.그러나 jQuery가 정의되어 있지 않으면 같은 에러가 발생합니다.
결국...jQuery는 현재 정의되어 있지 않습니다.
사용하다
jQuery(document).
대신
$(document).
또는
함수 내에서 $는 예상대로 jQuery를 가리킵니다.
(function ($) {
$(document).
}(jQuery));
(기능($ ) {"엄밀하게 사용";
$(function) {
//코드 입력
});
}(jQuery);나에게 효과가 있었던 것.첫 번째로 Import하는 라이브러리는 쿼리 라이브러리입니다.그 다음 jQuery.noConflict() 메서드를 호출합니다.
<head>
<script type="text/javascript" src="jquery.min.js"/>
<script>
var jq = jQuery.noConflict();
jq(document).ready(function(){
//.... your code here
});
</script>
<script>
var jq=jQuery.noConflict();
(function ($)
{
function nameoffunction()
{
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
이제 jQuery 대신 jq를 사용합니다.
이 문제는 함수 이름과 파일 내의 ID 이름 중 하나가 동일한 경우에 발생합니다.파일에 있는 모든 ID 이름이 고유한지 확인하세요.
사용할 수 있습니다.
jQuery(document).ready(function(){ ...... });
또는
(function ($) { ...... }(jQuery));
wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
프런트엔드에 jquery를 사용하는 경우 $deps를 jquery로 전달하면 됩니다.
언급URL : https://stackoverflow.com/questions/12343714/wordpress-how-to-use-jquery-and-sign
'programing' 카테고리의 다른 글
| AngularJS - 서버측 렌더링 (0) | 2023.03.26 |
|---|---|
| MongoDB 콘솔에서 _id로 삭제 (0) | 2023.03.26 |
| Node.js를 사용하여 복잡한 JSON 응답을 반환하는 방법 (0) | 2023.03.26 |
| 데이터베이스의 테이블 열에 색인을 작성할 시기를 결정하시겠습니까? (0) | 2023.03.26 |
| 뒤로 버튼을 Angular와 함께 사용하려면 어떻게 해야 합니까?JS UI 라우터 상태 시스템? (0) | 2023.03.26 |