javascript - JQuery - $ är inte definierad

Jag har ett enkelt jQuery-klickhändelse

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>

och en jQuery-referens definierad i site.master

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

Jag har kontrollerat att skriptet löses korrekt, jag kan se markeringen och visa skriptet direkt i Firebug, så det måste hittas. Men jag får fortfarande:

$ är inte definierad

och ingen av jquery fungerar. Jag har också provat de olika varianterna av detta som $ (document).ready och jQuery etc.

Det är en MVC 2-app på .net 3.5, jag är säker på att jag är riktigt trög, överallt på Google står det att man ska kontrollera att filen refereras korrekt, vilket jag har kontrollerat om och om igen, vänligen ge råd! :/

Svar #1

Det felet kan bara orsakas av en av tre saker:

  1. Din JavaScript-fil laddas inte korrekt in på din sida
  2. Du har en misslyckad version av jQuery. Detta kan hända eftersom någon redigerade kärnfilerna, eller så kan ett plugin ha skrivit över $-variabeln.
  3. Du har JavaScript som körs innan sidan är helt laddad, och därmed innan jQuery är helt laddad.

Först och främst, säkerställ vilken script som kallas korrekt, det ska se ut som

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

och bör inte ha attributen async eller defer.

Då bör du kontrollera Firebug net-panelen för att se om filen faktiskt laddas korrekt. Om inte, kommer den att markeras röd och stå "404" bredvid den. Om filen laddas korrekt, betyder det att problemet är nummer 2.

Se till att all jQuery JavaScript-kod körs inom ett kodblock såsom:

$(document).ready(function () {
  //your code here
});

Detta kommer att säkerställa att din kod laddas efter att jQuery har initierats.

En sista sak att kontrollera är att se till att du inte laddar några plugins före du laddar jQuery. Plugins utökar "$"-objektet, så om du laddar en plugin innan jQuery-kärnan har laddats kommer du att få det fel som du beskrev.

Observera: Om du laddar kod som inte kräver jQuery för att köras behöver den inte placeras inuti jQuery ready-handlern. Den koden kan separeras med hjälp av document.readyState.

Svar #2

Det kan vara så att din script-tagg kallas innan jquery-skriptet kallas.

<script type="text/javascript" src="js/script.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Detta resulterar eftersom $ inte är definierad

Placera jquery.js före din script-tagg så kommer det att fungera ;) så här:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/script.js"></script>

Svar #3

Först behöver du se till att jQuery-skriptet är inladdat. Detta kan vara från ett CDN eller lokalt på din webbplats. Om du inte laddar detta först innan du försöker använda jQuery kommer det att säga att jQuery inte är definierat.

<script src="jquery.min.js"></script>

Detta kan vara i HEAD eller i sidfoten på sidan, se bara till att du laddar det innan du försöker anropa något annat jQuery-material.

Då behöver du använda en av de två lösningarna nedan

(function($){
// your standard jquery code goes here with $ prefix
// best used inside a page with inline code, 
// or outside the document ready, enter code here
 })(jQuery);

eller

jQuery(document).ready(function($){
// standard on load code goes here with $ prefix
// note: the $ is setup inside the anonymous function of the ready command
});

var vänlig notera att många gånger $ (document).ready(function(){//code here}); inte kommer att fungera.

Svar #4

Om jQuery-plugin-anropet är bredvid </body>, och ditt skript laddas innan det, bör du få din kod att köras efter window.onload-händelsen, på detta sätt:

window.onload = function() {
  //YOUR JQUERY CODE
}

`

så, din kod kommer att köras först efter att fönstret har laddats, när alla resurser har laddats. Vid den tidpunkten kommer jQuery ($) att vara definierad.

Om du använder det:

$(document).ready(function () {
  //YOUR JQUERY CODE
});

`

$ är ännu inte definierad vid den här tiden, eftersom den anropas innan jQuery är laddad, och ditt skript kommer att misslyckas på den första raden i konsolen.

Svar #5

Jag gjorde precis samma sak och upptäckte att jag hade en hel del

type="text/javacsript"

Så de höll på att ladda, men ingen ytterligare ledtråd om varför det inte fungerade. Självklart löste korrekt stavning det.

Svar #6

Använd en scripts-sektion i vyn och huvudlayouten.

Lägg alla dina skript som är definierade i din vy inne i en Scripts-sektion i vyn. På detta sätt kan du låta huvudlayouten ladda detta efter att alla andra skript har laddats. Detta är standardinställningen när man startar ett nytt MVC5-webbprojekt. Osäker på tidigare versioner.

Views/Foo/MyView.cshtml:

// The rest of your view code above here.

@section Scripts 
{ 
    // Either render the bundle defined with same name in BundleConfig.cs...
    @Scripts.Render("~/bundles/myCustomBundle")

    // ...or hard code the HTML.
    <script src="URL-TO-CUSTOM-JS-FILE"></script>

    <script type="text/javascript">
      $(document).ready(function () {

        // Do your custom javascript for this view here. Will be run after 
        // loading all the other scripts.            
      });
    </script>
}

Views/Shared/_Layout.cshtml

<html>
<body>
    <!-- ... Rest of your layout file here ... -->

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Observera hur avsnittet scripts renderas sist i masterlayoutfilen.

Svar #7

Det betyder att ditt jQuery-bibliotek ännu inte har laddats.

Du kan flytta din kod efter att ha hämtat jQuery-biblioteket.

eller du kan använda något som detta

window.onload = function(){
  // Your code here
  // $(".some-class").html("some html");
};

Svar #8

Som nämnts ovan händer det på grund av konflikten med $-variabeln.

Jag löste detta problem genom att reservera en sekundär variabel för jQuery utan konflikt.

var $j = jQuery.noConflict();

och använd det sedan var som helst

$j( "div" ).hide();

mer information finns här

Svar #9

se till att du verkligen laddar jquery detta är inte jquery - det är ui!

  <script language="JavaScript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js">
  </script>

Detta är en korrekt skriptkälla för jquery:

 <script language="JavaScript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Relaterade artiklar