Problem with my client using jquery

1

I have a very unusual and strange problem ... I am using the Jquery library, however, it is not being interpreted correctly, the problem is not in the code itself, ie when I do the same code without syntax error or semantics the code is not triggered, however, when I put the same code in Codepen it works correctly.

No code is working

I've tried:

<!-- Baixar a biblioteca -->

<!-- HTML -->
<div class="col">
  <div id="pallete1" style="width: auto;height: 195px;background-color: 
   #316E1F"></div>
</div>

<script src="tmp.js"></script>
<script src="jquery-3.3.1.min.js"></script>

/*
 * tmp.js
 */

 $(document).ready(function(){
   $("#pallete1").click(function(){
     $(this).css("background-color", "blue");
   });
 });

<!-- Via CDN -->

<!-- HTML -->
<div class="col">
  <div id="pallete1" style="width: auto;height: 195px;background-color: 
   #316E1F"></div>
</div>

<script src="tmp.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384- 
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>

/*
 * tmp.js
 */

 $(document).ready(function(){
   $("#pallete1").click(function(){
     $(this).css("background-color", "blue");
   });
 });

<!-- Arquivo unico -->

<!-- HTML -->
<div class="col">
  <div id="pallete1" style="width: auto;height: 195px;background-color: 
   #316E1F"></div>
</div>

<script type="text/javascript">

  $(document).ready(function(){
    $("#pallete1").click(function(){
      $(this).css("background-color", "blue");
    });
  });

</script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384- 
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>

Noticing that I tested in the browsers Edge, Firefox and Chrome and did not work, I also tested with a server and opened a file directly from the browser and another computer here in the company where I work!

Some important details:

  • The same code works in Codepen
  • Features that require Bootstrap Javascript work, minus Tooltips and Popovers
  • Sometimes the code pauses, but, to and back whenever
  • The same logic only works with VanillaJs

Code Link for Codepen

What do I need:

I need to code in Jquery and use the Bootstrap features and I can, however, only use Codepen but I want to save and test my codes on the pc

Thanks to everyone

    
asked by anonymous 20.04.2018 / 19:20

1 answer

1

It happens exactly as @bfavaretto spoke.

If função depends on jQuery to execute it must come after Then you first call jQuery and then the function that depends on it.

See below the example working with your code:

<div class="col">
<div id="pallete1" style="width: auto;height: 195px;background-color: 
    #316E1F"></div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384- 
      q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
      crossorigin="anonymous"></script>
      
<script type="text/javascript">
$(document).ready(function(){
    $("#pallete1").click(function(){
    $(this).css("background-color", "blue");
    });
});
</script>

OBS: The same goes for files .css , if you have a CSS that depends on Bootstrap or if you want to overwrite some class of it for example, you must first index% and only after it should come your Bootstrap file or Bootstrap classes can overwrite yours. So the correct thing would be to do this for example:

<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="meu-css-que-depende-do-bootstrap.css" />
    
20.04.2018 / 19:56