Enable JQuery

Question

Enable JQuery

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

What is missing, to reproduce the codes of these repositories in localhost mode? I added it in the script header:

<script src="http://www.google.com/jsapi"type="text/javascript"> google.load("jquery","2")</script>

After the first response: Added

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Still inoperative

jquery

asked by anonymous 07.02.2016 / 21:58

2 answers

score 2 · Answer 1

Try to add $( document ).ready(function() { ... }); around your jquery code. See it working:

$( document ).ready(function() {
    $('.oddNum').css('background-color', '#DEA');
$('#DivTwo').css('background-color', '#FCC');

$('#btnOne').click(function() {
    // Action goes here
    $('.oddNum').css('background-color', '#FFF');
});
$('#btnTwo').click(function() {
    // Action goes here
    $('#DivTwo').css('background-color', '#FFF');
});
});

body {
   background-color: #eef; 
   padding: 5px;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="DivOne" class="oddNum">One</div>
<div id="DivTwo" class="evenNum">Two</div>
<div id="DivThree" class="oddNum">Three</div>
<button id="btnOne">Reset odd numbers</button>
<button id="btnTwo">Reset even numbers</button>

'

score 1 · Answer 2

If you are using code that uses jQuery, it needs to be loaded before any other feature that uses it as a dependency.

In JSFiddle , this seems irrelevant since you just need to import a resource and that's it, the code in the Javascript field works . It turns out that beneath the wipes, before running the Javascript block, all features are preloaded.

And that's the way your code should be, by importing the resources first (in this case, jQuery) and then making use of their functions.

Quite simply, this code will work as an example:

<!-- Importando a biblioteca -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><!--FazendousodojQuerydepoisdeimportado--><script>$(function(){$('body').text('Olá!');});</script>

ThefollowingcodewillnotworkbecausejQuery(or$)isundefined.Evenifyourunthesnippetandopenthebrowserconsole,you'llseeareferenceerrorlikethis:

ReferenceError:$isnotdefined.

<!-- Fazendo uso do jQuery antes de importado -->
<script>
  $(function(){
    $('body').text('Olá!');
  });
</script>


<!-- Importando a biblioteca -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Onewaytomakethecodeworklookslikethis:

<!doctype html>
<html>

<head></head>

<body>
  <div id="DivOne" class="oddNum">One</div>
  <div id="DivTwo" class="evenNum">Two</div>
  <div id="DivThree" class="oddNum">Three</div>
  <button id="btnOne">Reset odd numbers</button>
  <button id="btnTwo">Reset even numbers</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script>$(function(){//$(function(){});éomesmoque$(document).ready(...)$('.oddNum').css('background-color','#DEA');$('#DivTwo').css('background-color','#FCC');$('#btnOne').click(function(){//Actiongoeshere$('.oddNum').css('background-color','#FFF');});$('#btnTwo').click(function(){//Actiongoeshere$('#DivTwo').css('background-color','#FFF');});});</script></body></html>