Why Is JQuery Not Working With Bootstrap 4 Alpha 6?

Question

I am attempting to use jQuery and it is giving me various errors. I tried shuffling different script tags around, but had no success. Here is some code:

Solution 1:

Your problem is not related with bootstrap, you are adding jQuery dependent script before it's loaded. Add your script after jQuery and use $(document).ready(), .load() is deprecated. https://api.jquery.com/load-event/

.intro{
	width: 200px;
	height: 200px;
	background: purple;
	display: none;
}
.welcomeSize{
	width: 200px;
	height: 200px;
	background: violet;
	display: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JQuery+Bootstrap</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>

<div class="intro">
	
</div>
	  <div class="welcomeSize">
	  	
	  </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
	       <script>
if(jQuery){
console.log('yes');
}
    $(document).ready(function(){
            $('.intro').fadeIn(500, function(){
                $(".welcomeSize").fadeIn(500);
            });
        });
    </script> 
  </body>
</html>
</body>
</html>

Solution 2:

you have to import jquery before write any code using jquery so what you have to do is

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

// then your code goes here

the second thing for Uncaught TypeError: a.indexOf is not a function

you should use $(window).on('load', function() { ... });

Baca Juga

instead of

$(window).load(function() { ... });

load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.

Solution 3:

Note that you've been using the jQuery commands before linking the script. The script tag which source(src) attribute is pointing to Google CDN must come before the jQuery command.

JavaScript File

Why Is JQuery Not Working With Bootstrap 4 Alpha 6?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Why Is JQuery Not Working With Bootstrap 4 Alpha 6?"