$ परिभाषित नहीं किया गया है - asp.net एमवीसी 4

Question

नीचे दिए गए कोड के साथ, मुझे एक त्रुटि मिलती है: $ is not defined। मेरा सवाल है: यह कैसे संभव है?

... 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(function() { 
      $('#cb').click(function() { 
       if (this.checked) { 
        $('div#div').slideDown(); 
       } else { 
        $('div#div').slideUp(); 
       } 
      }); 
     }) 
    }); 
</script> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

@Scripts.Render("~/Scripts/jquery-1.7.1.min.js") 
@Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js") 

हम देख सकते हैं, यह ठीक से लिपियों के सभी लोड:

<script src="/Scripts/jquery-1.7.1.min.js"></script> 
<script src="/Scripts/jquery-ui-1.8.20.min.js"></script> 
<script src="/Scripts/jquery-1.7.1.js"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script src="/Scripts/jquery.validate.js"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.js"></script> 

यह कैसे हल करने के लिए?

Answer 1

आप दृश्य शरीर में अपनी स्क्रिप्ट रखा है और नहीं Scripts खंड है जो जहां से वह संबंधित और के बाद jQuery संदर्भित अंदर:

@section Scripts { 
    @Scripts.Render("~/Scripts/jquery-1.7.1.min.js") 
    @Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js") 
    @Scripts.Render("~/bundles/jqueryval") 

    <script type="text/javascript"> 
     $(function() { 
      $('#cb').click(function() { 
       if (this.checked) { 
        $('div#div').slideDown(); 
       } else { 
        $('div#div').slideUp(); 
       } 
      }); 
     }); 
    </script> 
} 

भी से बचने के लिए jQuery दो बार संदर्भित होने (में के रूप में अपने मामला) यदि आपने इसे _Layout में पहले से ही बंडल के रूप में शामिल नहीं किया है तो दोबारा जांच करें।

और एक आखिरी टिप्पणी: क्योंकि डॉम के अंत में डिफ़ॉल्ट स्क्रिप्ट्स को शामिल करने के बाद, बंद शरीर टैग से ठीक पहले, आपको $(document).ready में अपनी स्क्रिप्ट को लपेटने की आवश्यकता नहीं है क्योंकि जब तक यह निष्पादित होता है डोम पहले ही लोड हो जाएगा। आपका कोड भी बदतर है क्योंकि आपके पास दो बार था। ध्यान रखें कि $(function() { ... });$(document).ready(function() { ... }); के समतुल्य है और आपके मामले में आपने उन चीज़ों में से 2 को निहित किया है जब आपको वास्तव में उनमें से किसी की आवश्यकता नहीं है।

तो:

@section Scripts { 
    @Scripts.Render("~/Scripts/jquery-1.7.1.min.js") 
    @Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js") 
    @Scripts.Render("~/bundles/jqueryval") 

    <script type="text/javascript"> 
     $('#cb').click(function() { 
      if (this.checked) { 
       $('div#div').slideDown(); 
      } else { 
       $('div#div').slideUp(); 
      } 
     }); 
    </script> 
} 

Answer 2

आप दो बार jquery सहित हैं। सिवाय एक न्यूनतम किया गया है

<script src="/Scripts/jquery-1.7.1.min.js"></script> 
<script src="/Scripts/jquery-ui-1.8.20.min.js"></script> 
<script src="/Scripts/jquery-1.7.1.js"></script> 

पहली और आखिरी js फ़ाइलें, एक ही हैं और अन्य शायद नहीं है। गैर-मिनीफाइड निकालें और इसे आपके लिए काम करना चाहिए।

Answer 3

आप पृष्ठ के अंत तक jQuery JS शामिल नहीं कर रहे हैं लेकिन आप इसे शामिल करने से पहले $ अच्छी तरह से उपयोग करने का प्रयास कर रहे हैं।