TypeError: j(...).bxSlider는 함수가 아닙니다.슬라이더가 작동하지 않습니다.
저는 이 웹 사이트를 만들고 있습니다(웹 사이트를 만든 것은 제가 아니지만, 아쉽게도 수정하지 않으면 안 됩니다).firebug에 다음 오류가 발생하였습니다.TypeError: j(...).bxSlider는 함수가 아닙니다.
여기 제 것이 있습니다.<head>:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.min.js"></script>
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" media="all">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/aykamakina/tabs/css/easy-responsive-tabs.css">
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen">
<script type="text/javascript" src="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.js"></script>
여기 제 마크업이 있습니다.
<div class="the-main-slider-container">
<ul class="bxslider">
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-1.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-2.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-3.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-4.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-5.jpg">
</li>
</ul>
<div id="bx-pager">
<div class="pager-wrapper">
<div class="pager-container">
<a data-slide-index="0" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-features.png"></a>
<a data-slide-index="1" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-confezioni.png"></a>
<a data-slide-index="2" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-vantaggi.png"></a>
<a data-slide-index="3" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-specifiche.png"></a>
<a data-slide-index="4" href=""><img alt="icone" src="/wp-content/uploads/2014/03/d320-icone-compact2.png"></a>
</div>
</div>
</div>
</div>
스크립트는 다음과 같습니다.
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function()
{
j('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
mode: 'fade'
});
});
j(function ($) {
j(document).ready(function(){
j('.slider8').bxSlider({
mode: 'vertical',
slideWidth: 300,
minSlides: 2,
slideMargin: 10
});
});
});
j(document).ready(function() {
j(".various").fancybox({
maxWidth : 450,
maxHeight : 400,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
보시다시피 저는 noConflict를 사용하려고 했습니다.왜냐하면 인터넷에서 같은 에러로 많은 투고를 보았고, 대부분의 투고가 noConflict로 문제를 해결한 것 같았기 때문입니다.하지만 나에게는 효과가 없습니다.
그런데 모든 슬라이더는 Cyclon Slider라는 플러그인으로 만들어졌는데, 이전 개발자가 어떻게 했는지 정말 모르겠습니다.
마크업도 괜찮은 것 같아요뭐가 문제인지 알 수가 없어요.어떤 도움이라도 주시면 감사하겠습니다.시간 내주셔서 감사합니다!
편집 #1: 소스 코드에서 발견된 다른 jQuery 인스턴스
<script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05'></script>
<script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.masonry.min.js?ver=2.1.05'></script>
<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.min.js?ver=2.8.2'></script>
<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.carousel.min.js?ver=2.8.2'></script>
<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.swipe.min.js?ver=2.8.2'></script>
<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.tile.min.js?ver=2.8.2'></script>
<script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.video.min.js?ver=2.8.2'></script>
여러 가지 시도를 한 후, 나는 내 자신의 문제를 해결할 수 있었다.bxSlider, easyResponseTabs용 JavaScript 파일 및 이들을 호출하는 스크립트를 footer.php에 저장했습니다.그러나 헤더에 jQuery & jQuery UI 파일을 남겨두었습니다.php 및 슬라이더용 css 파일.
이제 모든 것이 잘 작동하고 마크업이 검증 테스트를 통과했습니다!같은 종류의 오류가 있는 경우
- jQuery 및 기타 JavaScript 파일 경로를 확인합니다.
- 이전 버전의 jQuery를 사용하고 있는지 또는 호환되지 않는 버전의 jQuery & jQuery UI를 사용하고 있는지 확인합니다.
- 링크 태그를 모두 바닥글에 넣을 수 있는 멍청한 개발자와 함께 작업하지 마십시오.php 및 header.discripts를 호출합니다.
- jquery.min.js의 인스턴스 및 버전이 다른지 확인합니다.
- (내 경우) bxSlider js 파일을 바닥글에 넣습니다.php 단, css 파일은 header.files에 남겨둡니다(검증에서는 이 방법으로 정상적으로 동작합니다).
또한 당신은 나에게 편지를 쓸 수 있습니다, 나는 도울 수 있습니다.
대부분의 경우 jQuery의 여러 인스턴스가 원인일 수 있습니다.아래를 보면 WP가 jQuery로 보이는 태그를 더 삽입한 것을 알 수 있습니다.
jQuery의 두 번째 인스턴스가 플러그인에 의해 삽입되고 있을 수 있습니다.어느 것을 특정해, 디세블로 하고, 문제가 해결될지를 확인합니다.
jQuery 스크립트를 확인한다고 대답하는 사람도 있습니다.한 개만 있는지 확인합니다.하지만 "왜?"라는 질문에는 대답하지 마세요.나도 같은 문제가 있었지만 해결되었다bxSlider의 (링크된) JS 파일은 jQuery에 함수를 만들고 이후 파일은 이 함수를 덮어씁니다(jQuery에는 원래 bxSlider 항목이 포함되어 있지 않으므로 삭제).정답은 JS 링크를 마지막 jQuery JS 파일 링크 뒤에 배치한 후 작동합니다.
언급URL : https://stackoverflow.com/questions/23502853/typeerror-j-bxslider-is-not-a-function-sliders-are-not-working
'programing' 카테고리의 다른 글
| Jackson JSON 시리얼화, 레벨 정의에 의한 재귀 회피 (0) | 2023.03.06 |
|---|---|
| Bower를 사용한 패키지 업데이트 (0) | 2023.03.06 |
| 단말기에서 레일 앱으로 json 투고 요청을 컬링합니다. (0) | 2023.03.06 |
| jAJAX 콜의 jQuery 콜백 (0) | 2023.03.06 |
| Redx 동기식 또는 비동기식으로 store.dispatch를 실행한다. (0) | 2023.03.06 |