2011-05-24 20 views
33

यहाँ नहीं है मेरे कोड है:jQuery - एक समारोह त्रुटि

(function($){ 
    $.fn.pluginbutton = function (options) { 
     myoptions = $.extend({ left: true }); 
     return this.each(function() { 
      var focus = false; 
      if (focus === false) { 
       this.hover(function() { 
        this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 }); 
        this.removeClass('VBfocus').addClass('VBHover'); 
       }, function() { 
        this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); 
        this.removeClass('VBfocus').removeClass('VBHover'); 
       }); 
      } 
      this.mousedown(function() { 
       focus = true 
       this.animate({ backgroundPosition: "0 30px" }, { duration: 0 }); 
       this.addClass('VBfocus').removeClass('VBHover'); 
      }, function() { 
       focus = false; 
       this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); 
       this.removeClass('VBfocus').addClass('VBHover'); 
      }); 
     }); 
    } 
}); 


$(document).ready(function() { 
    $('.smallTabsHeader a').pluginbutton(); 
}); 

यह मुझे एक त्रुटि देता है। क्या गलत है?

+1

सटीक त्रुटि क्या और कहां है? –

उत्तर

74

में यह समस्या है "सर्वश्रेष्ठ" एक anonymous function का उपयोग करके हल पास-में jQuery वस्तु thusly के लिए:

बेनामी समारोह लग रहा है की तरह:

<script type="text/javascript"> 
    (function($) { 
     // You pass-in jQuery and then alias it with the $-sign 
     // So your internal code doesn't change 
    })(jQuery); 
</script> 

यह 'मॉड्यूल पैटर्न' जैसी चीजों के साथ उपयोग किए जाने पर जावास्क्रिप्ट की क्रियान्वयन (गरीब व्यक्ति) 'निर्भरता इंजेक्शन' है।

तो अपने कोड देखो की तरह:
बेशक , अब आप अपने आंतरिक कोड के लिए कुछ परिवर्तन करना चाहते हो सकता है, लेकिन आप विचार मिलता है।

<script type="text/javascript"> 
    (function($) { 
     $.fn.pluginbutton = function(options) { 
      myoptions = $.extend({ left: true }); 
      return this.each(function() { 
       var focus = false; 
       if (focus === false) { 
        this.hover(function() { 
         this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 }); 
         this.removeClass('VBfocus').addClass('VBHover'); 
        }, function() { 
         this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); 
         this.removeClass('VBfocus').removeClass('VBHover'); 
        }); 
       } 
       this.mousedown(function() { 
        focus = true 
        this.animate({ backgroundPosition: "0 30px" }, { duration: 0 }); 
        this.addClass('VBfocus').removeClass('VBHover'); 
       }, function() { 
        focus = false; 
        this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); 
        this.removeClass('VBfocus').addClass('VBHover'); 
       }); 
      }); 
     } 
    })(jQuery); 
</script> 
5

समस्या उत्पन्न होती है जब एक अलग सिस्टम $ चर को पकड़ता है। आपके पास एकाधिक पुस्तकालयों से ऑब्जेक्ट्स के रूप में कई $ चर का उपयोग किया जा रहा है, जिसके परिणामस्वरूप त्रुटि हुई है।

इसे हल करने के लिए, बस अपने (function($){ से पहले jQuery.noConflict का उपयोग करें:

jQuery.noConflict(); 
(function($){ 
$.fn.pluginbutton = function (options) { 
... 
+0

फायर फॉक्स $ ("। SmallTabsHeader a") देता है। प्लगइनबटन एक फ़ंक्शन नहीं है –

+0

मैंने सोचा (फ़ंक्शन ($) {आपके द्वारा वर्णित त्रुटि को हल करता है –

+0

उपर्युक्त पृष्ठ पर बड़ी संख्या में त्रुटियों का कारण बनता है –

7

परिवर्तन

}); 


$(document).ready(function() { 
    $('.smallTabsHeader a').pluginbutton(); 
}); 

})(jQuery); //<-- ADD THIS 


$(document).ready(function() { 
    $('.smallTabsHeader a').pluginbutton(); 
}); 

यह इसलिए आवश्यक है क्योंकि, आप गुमनाम समारोह कॉल करने की आवश्यकता करने के लिए कि आपने

के साथ बनाया है
(function($){ 

और ध्यान दें कि यह एक तर्क की अपेक्षा करता है कि यह आंतरिक रूप से $ के रूप में उपयोग करेगा, इसलिए आपको jQuery ऑब्जेक्ट का संदर्भ पारित करने की आवश्यकता है।

साथ ही, आप (जहां $() की जरूरत नहीं है ) जिसमें आप return this.each

कर पहले एक में सब this.$(this). को बदलने के लिए, पहले एक को छोड़कर की आवश्यकता होगी, इसमें वजह से है प्लगइन बॉडी, this आपके चयनकर्ता से मेल खाने वाली jQuery ऑब्जेक्ट का संदर्भ रखती है, लेकिन कहीं भी गहराई से, this विशिष्ट DOM तत्व को संदर्भित करती है, इसलिए आपको इसे $() में लपेटने की आवश्यकता है।

पूर्ण कोड http://jsfiddle.net/gaby/NXESk/

3

मैंने इसे अपने कार्य का नाम बदलकर हल किया।

function editTheForm(value) 

निर्माण पूरी तरह से

function editForm(value) 

बदल दिया

करने के लिए।

+11

wtf? यह कैसे संभव है? – Mego

2

जब एक MVC साइट मैं इन त्रुटियों को मिल गया के लिए एक ASP.Net वेबफ़ॉर्म प्रोटोटाइप परिवर्तित:

TypeError: $(...).accordion is not a function
$("#accordion").accordion(


$('#dialog').dialog({
TypeError: $(...).dialog is not a function

यह webforms में ठीक काम किया। समस्या/समाधान _Layout.cshtml

@Scripts.Render("~/bundles/jquery") 

त्रुटियों को दूर करने के लिए यह देखने के लिए टिप्पणी करें। फिर इसे BundlesConfig में ठीक करें:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js")); 
0

मेरे मामले में, एक ही त्रुटि में बहुत आसान फ़िक्स था। असल में मेरा फ़ंक्शन एक .js फ़ाइल में था जो वर्तमान एएसपीएक्स में शामिल नहीं था जो दिखा रहा था। मुझे बस जरूरी लाइन थी।

संबंधित मुद्दे