$ tanımlı değil - asp.net MVC 4

Question

Aşağıdaki kod ile bir hata alıyorum: $ is not defined. Sorum şu: Nasıl mümkün olabilir?

... 
<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") 

Gördüğümüz gibi, bu komut düzgün tüm yük:

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

Nasıl sorunu çözmek için?

Answer 1

Sen görünümü vücutta Senaryonuzu yerleştirdiğiniz ve ait olduğu ve jQuery başvuran sonra olduğunu Scripts bölümün içinde değil:

Ayrıca

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

önlemek için olduğu gibi (iki kez jQuery referanslı olan senin durumda) _Layout ürününüzde bir paket olarak eklemediyseniz iki kez kontrol edin.

Ve son bir açıklama: varsayılan komut dosyaları DOM'ın sonuna, kapanış gövdesi etiketinin hemen öncesine eklendiğinden, komut dosyasını bir $(document).ready dosyasında yalnızca çalıştırdığı zamandan beri sarmalamanız gerekmez. DOM zaten yüklenecek. Kodun daha da kötüydü çünkü iki kere aldın. $(function() { ... });'un $(document).ready(function() { ... });'a eşdeğer olduğunu ve sizin durumunuza göre, bunlardan hiçbirine ihtiyacınız olmadığında, bunlardan 2'si yerleştirdiğinizi unutmayın.

Yani:

@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'yi iki kez ekliyorsunuz.

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

İlk ve son js dosyaları aynıdır, biri küçültülmüş ve diğeri büyük olasılıkla değil. Minik olmayanı çıkarın ve sizin için çalışmalıdır.

Answer 3

Sayfanın sonuna kadar jQuery JS'yi dahil etmiyorsunuz ancak dahil etmeden önce $ well'dan yararlanmaya çalışıyorsunuz.