javascript - Why is jQuery not working with Bootstrap 4 alpha 6?

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:

<!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 rel="stylesheet" href=".0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
 <style>
/*some css here*/
  </style>

        <!--a bunch of HTML here-->
      <script>
if(jQuery){
alert('yes');
}
    $(window).load(function(){
            $('.intro').fadeIn(500, function(){
                $(".weleSize").fadeIn(500);
            });
        });
    </script>
    <script src=".1.0/jquery.min.js"></script>
    <script src=".4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
      <script src=".0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

I get an error saying that jQuery is undefined. If I put the jquery CDN before my script, I get this error:

Uncaught TypeError: a.indexOf is not a function
    at r.fn.init.r.fn.load (jquery.min.js:4)
    at newsite.html:129

Is there something I am missing?

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:

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
 <style>
/*some css here*/
  </style>

        <!--a bunch of HTML here-->
      <script>
if(jQuery){
alert('yes');
}
    $(window).load(function(){
            $('.intro').fadeIn(500, function(){
                $(".weleSize").fadeIn(500);
            });
        });
    </script>
    <script src="https://ajax.googleapis./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

I get an error saying that jQuery is undefined. If I put the jquery CDN before my script, I get this error:

Uncaught TypeError: a.indexOf is not a function
    at r.fn.init.r.fn.load (jquery.min.js:4)
    at newsite.html:129

Is there something I am missing?

Share Improve this question asked Mar 8, 2017 at 1:56 shurup 8811 gold badge14 silver badges40 bronze badges

1 remove bootstrap. you'll pretty quickly see that it is unrelated. – Kevin B Commented Mar 8, 2017 at 2:16

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

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./load-event/

.intro{
	width: 200px;
	height: 200px;
	background: purple;
	display: none;
}
.weleSize{
	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 rel="stylesheet" href="https://maxcdn.bootstrapcdn./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="weleSize">
	  	
	  </div>

    <script src="https://ajax.googleapis./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn./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(){
                $(".weleSize").fadeIn(500);
            });
        });
    </script> 
  </body>
</html>
</body>
</html>

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

<script src="https://ajax.googleapis./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() { ... });

instead of

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

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why is jQuery not working with Bootstrap 4 alpha 6? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)