TypeError: $ ไม่ใช่ฟังก์ชันเมื่อเรียกใช้ฟังก์ชัน jQuery

214

ฉันมีสคริปต์ jQuery ง่าย ๆ ในปลั๊กอิน WordPress ที่ใช้เครื่องห่อหุ้ม jQuery เช่นนี้:

$(document).ready(function(){

    // jQuery code is in here

});

ฉันกำลังเรียกสคริปต์นี้จากภายในแผงควบคุม WordPress และกำลังโหลดหลังจากเฟรมเวิร์ก jQuery โหลดแล้ว

เมื่อฉันตรวจสอบหน้าเว็บใน Firebug ฉันยังคงได้รับข้อความแสดงข้อผิดพลาด:

TypeError: $ ไม่ใช่ฟังก์ชั่น

$ (เอกสาร) .ready (ฟังก์ชั่น () {

ฉันควรห่อสคริปต์ในฟังก์ชั่นนี้หรือไม่:

(function($){

    // jQuery code is in here

})(jQuery);

ฉันมีข้อผิดพลาดนี้หลายครั้งและไม่แน่ใจว่าจะจัดการอย่างไร

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก.

— เจสัน
แหล่งที่มา

3

หากคุณพิมพ์$ในคอนโซลและกด Enter - คุณเห็นอะไร

— zerkms

เมื่อใช้ $ in console ฉันจะได้รับ "undefined"

— Jason

320

โดยค่าเริ่มต้นเมื่อคุณเข้าคิว jQuery ใน Wordpress คุณต้องใช้jQueryและ$ไม่ได้ใช้ (นี่คือเพื่อความเข้ากันได้กับห้องสมุดอื่น ๆ )

วิธีการห่อของคุณfunctionจะทำงานได้ดีหรือคุณสามารถโหลด jQuery ด้วยวิธีอื่น (แต่นั่นอาจไม่ใช่ความคิดที่ดีใน Wordpress)

หากคุณต้องใช้document.readyคุณสามารถผ่าน$เข้าไปในการเรียกใช้ฟังก์ชันได้:

jQuery(function ($) { ...

— ยาระเบิด
แหล่งที่มา

ฉันลองรุ่นที่สอง แต่ไม่ได้ผลรุ่นแรกทำได้ แต่ฉันแค่ต้องการให้แน่ใจว่าฉันจะไม่โทรหา jQuery เป็นสองเท่า

— เจสัน

@ Jason คุณไม่ต้องการมัน เพียงแค่สิ่งที่ฉันโพสต์: jsfiddle.net/vcbYJ

— ยาระเบิด

คุณช่วยโปรดดูคำถามนี้wordpress.stackexchange.com/questions/214858/…

และหากตัวเลือกใด ๆ อยู่ข้างนอกjQuery(function ($) { ...คุณต้องใช้jQueryแทน$

— Misha Rudrastyh

ขอบคุณครับ ขอบคุณมัน

— Desper

154

สิ่งนี้ควรแก้ไข:

jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
  var body = $( 'body' );
});

พูดง่ายๆก็คือ WordPress ใช้งานสคริปต์ของตัวเองก่อนที่คุณจะทำได้และพวก$มันจะปล่อยvar ดังนั้นมันจะไม่ชนกับไลบรารีอื่น สิ่งนี้สมเหตุสมผลอย่างยิ่งเนื่องจาก WordPress ใช้สำหรับเว็บไซต์แอพและบล็อกทุกประเภท

จากเอกสารของพวกเขา:

ไลบรารี jQuery ที่มาพร้อมกับ WordPress ถูกตั้งค่าเป็นโหมด noConflict () (ดูที่ wp-include / js / jquery / jquery.js) นี่คือเพื่อป้องกันปัญหาความเข้ากันได้กับไลบรารี JavaScript อื่นที่ WordPress สามารถลิงก์ได้

ในโหมด noConflict (), $ ลัดทั่วโลกสำหรับ jQuery ไม่พร้อมใช้งาน ...

— Matthew Blancarte
แหล่งที่มา

28

วิธีนี้ใช้ได้ผลสำหรับฉัน

;(function($){
    // your code
})(jQuery);

ย้ายรหัสของคุณภายในการปิดและใช้$แทนjQuery

ฉันพบวิธีแก้ปัญหาข้างต้นใน/magento/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma

... หลังจากค้นหามากเกินไป

— Bikram Shrestha
แหล่งที่มา

2

ทางออกที่ยอดเยี่ยม เหตุผลหลักที่ใช้งานได้เนื่องจากว่า";" ปิดอินสแตนซ์อื่น ๆ ของ jquery ที่แอ็คทีฟอยู่แล้วและในขณะเดียวกันก็ประกาศอีกอันใหม่ในพื้นที่ เมื่อคุณมีเวลาเพียงไม่กี่วินาทีในการนำเลย์เอาต์มาใช้ในการผลิตหรือล็อตและปลั๊กอิน WordPress จำนวนมากที่ทำงานสิ่งนี้สามารถทำได้อย่างยอดเยี่ยม แต่ระวังให้ดีว่าคุณต้องแก้ไขปัญหานี่เป็นเพียงตัวช่วยวงดนตรี แต่ถ้ามันเป็นหน้าข้อมูลก็ไม่เป็นไร

— luis

@ Martha James สิ่งนี้ใช้ได้กับฉันด้วย มันอาจหรืออาจจะไม่ทำงานเพื่อคนอื่น

— Bikram Shrestha

19

คุณสามารถหลีกเลี่ยงความขัดแย้งเช่นนี้

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});

— Ashwani Panwar
แหล่งที่มา

7

หรือ $ = jQuery.noConflict ();

— Cyssoo

17

var $=jQuery.noConflict();

$(document).ready(function(){
    // jQuery code is in here
});

ให้เครดิตกับ Ashwani Panwar และ Cyssoo คำตอบ: https://stackoverflow.com/a/29341144/3010027

— optimiertes
แหล่งที่มา

13

ลองสิ่งนี้:

<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>

— Jose Carlos Ramos Carmenates
แหล่งที่มา

8

คุณต้องผ่านฟังก์ชัน $ ()

<script>
jQuery(document).ready(function($){

// jQuery code is in here

});
</script>

— Jitendra Damor
แหล่งที่มา

3

สิ่งนี้ต่างจากคำตอบที่ให้ไว้ข้างต้น (จากสามปีก่อน) อย่างไร

— rnevius

8

แทนที่$เครื่องหมายด้วยjQuery เช่นนี้:

jQuery(function(){
//your code here
});

— MaXee Khan
แหล่งที่มา

7

ตรวจสอบการอ้างอิง jQuery ของคุณอีกครั้ง อาจเป็นไปได้ว่าคุณกำลังอ้างถึงมากกว่าหนึ่งครั้งหรือคุณกำลังเรียกฟังก์ชั่นของคุณเร็วเกินไป (ก่อนที่จะมีการกำหนด jQuery) คุณสามารถลองตามที่กล่าวไว้ในความคิดเห็นของฉันและใส่การอ้างอิง jQuery ที่ด้านบนของไฟล์ของคุณ (ในส่วนหัว) และดูว่าช่วยได้หรือไม่

หากคุณใช้การห่อหุ้มของ jQuery มันไม่ควรช่วยในกรณีนี้ โปรดลองเพราะฉันคิดว่ามันสวยและชัดเจนกว่านี้ แต่ถ้า jQuery ไม่ได้กำหนดไว้คุณจะได้รับข้อผิดพลาดเดียวกัน

ในที่สุด ... jQuery ไม่ได้กำหนดไว้ในปัจจุบัน

— Raghul Manoharan
แหล่งที่มา

ฉันคิดว่ามันไม่ใช่สิ่งที่พยายามเข้าถึง JQuery ก่อนที่จะถูกกำหนดซึ่งจะทำลายทุกอย่าง ลองย้ายscriptที่อ้างอิงJQueryถึงด้านบนของคุณindex.htmlและมันอาจจะทำงาน

— Dan Moldovan

คำตอบนี้ต้องการความชัดเจนมากขึ้น ใช่ส่วนอื่น ๆ นั้นถูกต้องหากมีเนมสเปซมาตรฐานนำมาพร้อมกับเวอร์ชันของ jQuery ที่โหลดผ่านปลั๊กอินอื่น ๆ แต่อย่าลืมว่าคุณกำลังโหลด jQuery มากกว่าหนึ่งครั้งโดยไม่ตั้งใจ (และอาจไม่จำเป็น)

— edkay

6

นอกจากนี้ฉันพบทางออกที่ดีสำหรับการใช้โหมด 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);

ฉันพบโซลูชันนี้จากที่นี่ https://thecodingstuff.com/how-to-properly-use-jquery-noconflict-mode-in-wordpress/

— Renish Khunt
แหล่งที่มา

5

ใช้

jQuery(document).

แทน

$(document).

หรือ

ภายในฟังก์ชั่นให้คะแนน $ jQuery ตามที่คุณคาดหวัง

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

— แซนเจย์
แหล่งที่มา

4

อะไรที่เหมาะกับฉัน ไลบรารีแรกที่จะนำเข้าคือไลบรารีแบบสอบถามและจากนั้นเรียกเมธอด jQuery.noConflict ()

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>

— PbxMan
แหล่งที่มา

4

(ฟังก์ชั่น ($) {
  "ใช้อย่างเข้มงวด";

  $ (ฟังก์ชั่น () {

    // รหัสของคุณที่นี่

  });

} (jQuery));

— Sharif Mohammad Eunus
แหล่งที่มา

3

<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

    $(document).ready(readyFn); 
    })(jQuery);

ตอนนี้ใช้ jq แทน jQuery

— Aman birjpuriya
แหล่งที่มา

3

คุณเจอปัญหานี้เมื่อชื่อฟังก์ชั่นของคุณและหนึ่งในชื่อ id ในไฟล์เหมือนกัน เพียงตรวจสอบให้แน่ใจว่าชื่อ id ของคุณในไฟล์นั้นไม่ซ้ำกัน

— Laxman Jaygonde
แหล่งที่มา

2

คุณสามารถใช้ได้

jQuery(document).read(function(){ ... });

หรือ

(function ($) { ... }(jQuery));

— Bhavesh Balar
แหล่งที่มา