jQuery Uncaught TypeError: คุณสมบัติ '$' ของวัตถุ [หน้าต่างวัตถุ] ไม่ใช่ฟังก์ชัน


92

ทั้งหมดฉันดาวน์โหลดแอปพลิเคชันฟอร์ม JS / CSS ที่รวมไว้ล่วงหน้าและฉันกำลังพยายามใช้ใน Wordpress ฉันมีรหัสต่อไปนี้:

$(document).ready(function () {


/*----------------------------------------------------------------------*/
/* Parse the data from an data-attribute of DOM Elements
/*----------------------------------------------------------------------*/


$.parseData = function (data, returnArray) {
    if (/^\[(.*)\]$/.test(data)) { //array
        data = data.substr(1, data.length - 2).split(',');
    }
    if (returnArray && !$.isArray(data) && data != null) {
        data = Array(data);
    }
    return data;
};

/*----------------------------------------------------------------------*/
/* Image Preloader
/* http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
/*----------------------------------------------------------------------*/



// Arguments are image paths relative to the current page.
$.preload = function() {
    var cache = [],
        args_len = arguments.length;
    for (var i = args_len; i--;) {
        var cacheImage = document.createElement('img');
        cacheImage.src = arguments[i];
        cache.push(cacheImage);
    }
};


/*----------------------------------------------------------------------*/
/* fadeInSlide by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/


$.fn.fadeInSlide = function (speed, callback) {
    if ($.isFunction(speed)) callback = speed;
    if (!speed) speed = 200;
    if (!callback) callback = function () {};
    this.each(function () {

        var $this = $(this);
        $this.fadeTo(speed / 2, 1).slideDown(speed / 2, function () {
            callback();
        });
    });
    return this;
};


/*----------------------------------------------------------------------*/
/* fadeOutSlide by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/


$.fn.fadeOutSlide = function (speed, callback) {
    if ($.isFunction(speed)) callback = speed;
    if (!speed) speed = 200;
    if (!callback) callback = function () {};
    this.each(function () {

        var $this = $(this);
        $this.fadeTo(speed / 2, 0).slideUp(speed / 2, function () {
            $this.remove();
            callback();
        });
    });
    return this;
};

/*----------------------------------------------------------------------*/
/* textFadeOut by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/


$.fn.textFadeOut = function (text, delay, callback) {
    if (!text) return false;
    if ($.isFunction(delay)) callback = delay;
    if (!delay) delay = 2000;
    if (!callback) callback = function () {};
    this.each(function () {

        var $this = $(this);
        $this.stop().text(text).show().delay(delay).fadeOut(1000,function(){
            $this.text('').show();
            callback();
        })
    });
    return this;
};

/*----------------------------------------------------------------------*/
/* leadingZero by revaxarts.com
/* adds a leding zero if necessary
/*----------------------------------------------------------------------*/


$.leadingZero = function (value) {
    value = parseInt(value, 10);
    if(!isNaN(value)) {
        (value < 10) ? value = '0' + value : value;
    }
    return value;
};


});

ฉันสมมติว่า Wordpress ไม่มีข้อขัดแย้งที่ทำให้เกิดปัญหาดังนั้นฉันจึงอัปเดตวงเล็บสุดท้ายให้มีลักษณะดังนี้:

}, "jQuery");

อย่างไรก็ตามฉันยังคงได้รับข้อผิดพลาดเดิม มีใครรู้บ้างว่าจะเกิดปัญหานี้ขึ้นและจะแก้ไขได้อย่างไร

ขอบคุณล่วงหน้า!

คำตอบ:


260

นี่เป็นปัญหาทางไวยากรณ์ไลบรารี jQuery ที่มาพร้อมกับ WordPress จะโหลดในโหมด "ไม่มีข้อขัดแย้ง" เป็นการป้องกันปัญหาความเข้ากันได้กับไลบรารีจาวาสคริปต์อื่น ๆ ที่ WordPress สามารถโหลดได้ ในโหมด "no-confict" ทางลัด $ จะไม่พร้อมใช้งานและใช้ jQuery อีกต่อไปเช่น

jQuery(document).ready(function ($) {

โดยการใส่ $ ไว้ในวงเล็บหลังการเรียกใช้ฟังก์ชันคุณสามารถใช้ทางลัดนี้ภายในบล็อกโค้ดได้

สำหรับรายละเอียดทั้งหมดโปรดดูWordPress Codex


ฉันควรเพิ่มคุณต้องคลาย "jQuery" ในตอนท้าย
RedEyedMonster

3
คุณเป็นผู้ช่วยชีวิต !!! หลังจาก 3 วันของการดีบักฉันพบว่านี่เป็นวิธีแก้ปัญหาที่แน่นอนสำหรับปัญหาของฉัน แม้ว่า WordPress กำลังโหลดไฟล์ jQuery แต่ฉันไม่สามารถเข้าถึง fucntions ที่ระบุไว้ในเอกสารได้ ดังนั้นบรรทัดของรหัสที่แน่นอนนี้คือการjQuery(document).ready(function ($) {แก้ไขให้ดี ขอบคุณมากสำหรับการแบ่งปัน
Devner

2
นี่เป็นปัญหาเดียวกันใน Drupal ด้วย โซลูชันก็ใช้ได้เช่นกัน ขอบคุณ
Yogesh Gupta

35

โครงสร้างที่เป็นมิตรกับความขัดแย้งที่ฉันชอบ:

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

การเรียก jQuery ด้วยตัวชี้ฟังก์ชันเป็นทางลัดสำหรับ $ (document) พร้อม (... )

หรือที่เราพูดในกาแฟ:

jQuery ($) ->
  # code here

หาก$เป็นอินสแตนซ์ jquery อยู่แล้ว - มีเหตุผลใดที่ต้องส่งjQueryและ$ตั้งชื่ออีกครั้ง
zerkms

2
$ อาจไม่ใช่อินสแตนซ์ jQuery หากขัดแย้งกับไลบรารีอื่น - โหมดไม่มีข้อขัดแย้ง
Julian

4
มันเป็นทางลัดไป$(document).ready()ไม่ใช่$(document).on('load')
Kevin B

สิ่งนี้ได้ผลสำหรับฉัน! ฟังก์ชัน custom.js ทั้งหมดในธีมของฉันพังอย่างอธิบายไม่ถูก ฉันแทนที่ $ (document) .ready (function () {ด้วยสิ่งนี้และมันใช้งานได้เหมือนเวทมนตร์ :)
Ira Herman


1

คุณสามารถพิจารณาแทนที่สคริปต์ WordPress jQuery เริ่มต้นด้วย Google Library ได้โดยเพิ่มสิ่งต่อไปนี้ลงในไฟล์ธีม functions.php:

function modify_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'modify_jquery');

รหัสนำมาจากที่นี่: http://www.wpbeginner.com/wp-themes/replace-default-wordpress-jquery-script-with-google-library/


ทางออกที่ดีที่สุดหากคุณใช้ปลั๊กอิน JQuery "ภายนอก" นอก WP Downside: - อาจ - ขัดแย้งกับปลั๊กอิน Wordpress บางตัว - ไม่มีอะไรสังเกตเห็นด้านข้างของฉัน
RunsnbunsN

-1

บางทีคุณอาจมีรหัสเช่นนี้ก่อน jquery:

var $jq=jQuery.noConflict();
$jq('ul.menu').lavaLamp({
    fx: "backout", 
    speed: 700
});

และพวกเขาคือความขัดแย้ง

คุณสามารถเปลี่ยน $ เป็น (jQuery)


1
ฉันใช้มันเหมือนvar $=jQuery.noConflict();Mine เป็นการตั้งค่า java-webapp แต่ฉันได้รับข้อผิดพลาดเดียวกัน!
coding_idiot
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.