JQuery not being executed

The jquery-script does not get executed. There’s no alert, neither does the class of those elements get changed. Is it because the What am I doing wrong?

The URL is http://cf-touchpoint.rf.gd/profile/, but you need to create a login first.

profile.php:

<!-- Sidebar Collapser-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div>            
        <button id="toggleSidebar" class="btn btn-default">
        <i class="fas fa-times-circle"></i>
       </button>            
   </div>
</nav> 

The code at the bottom of the body is:
script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

$('#toggleSidebar').on('click', function() {
    alert("Test");
   $('.grid-container-item-sidebar').toggleClass('is-collapsed');
  $('.grid-container-item-content').toggleClass('is-full-width');

});

I checked the page and saw this syntax:

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

            $('#toggleSidebar').on('click', function() {
                alert("Test");
                $('.grid-container-item-sidebar').toggleClass('is-collapsed');
                $('.grid-container-item-content').toggleClass('is-full-width');
            });

        </script>

I’m not sure if you can use <script> tags like that. You can have the src attribute and link to an external file OR have an opening and closing tag with custom code in between, but not the same. Could you try separating the tags into a separate script tag for jQuery and for your own code?

Now it is indeed working. Thank you! Sadly I somewhat cannot post the code, but as @Admin said, create a unique script tag for the “loading” of jquery, and another script-tag for the actual script itself.

I noticed that on other pages you use
https://code.jquery.com/jquery-3.3.1.slim.min.js

It would be good to use everywhere
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

So… once a user comes to your home page and loaded one variant of jQuery (full not slim)
he will have it in the browser cache when visiting any other pages
and won’t waste time downloading other versions of jQuery (speed)

btw. new version of jQuery has been released 3.4.0

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.