2017-09-08 16 views
-1
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" type="image/png" href="images/favicon.png"> 

    <title>Jquery alert example</title> 
    <!-- Bootstrap core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 

    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="js/ie-emulation-modes-warning.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 

    <body> 
     <div class="container-fluid"> 
     <script type="text/javascript"> 
     jQuery(document).ready(function(){ 
      jQuery('#event').click(function(){ 
      alert("hello world"); 
      }); 
     }); 
     </script> 
     <input type='button' id='event' class='btn btn-success' value='click me'> 
     </div><!--container ends here--> 
    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script> 
    <script src="js/bootstrap.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="js/ie10-viewport-bug-workaround.js"></script> 
    <script src="js/wow.min.js"></script> 
    </body> 
</html> 

アラートボタンをクリックするとイベントが機能しません。 jQueryファイルも添付しています。 jQueryのバージョン1からバージョン3にアップグレードする場合、jQueryの構文を変更する必要があります。私が間違いを犯している場所に通知し、この問題を回避する方法を教えてください。 jQueryのスクリプトタグの下クリック時Jqueryアラートイベントが機能しない

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     jQuery('#event').click(function(){ 
     alert("hello world"); 
     }); 
    }); 
</script> 

+5

そのあなたはjqueryのを含める前に、イベントが配置されてクリックしてくださいおもう。 クリックイベントを 'の下に移動します。 –

+0

最後にスクリプトタグを挿入しますボディータグの –

+0

'JQuery'コードは、' JQuery'が 'Jquery'ライブラリのインクルードの後に​​配置されるようにしてください。 –

答えて

0

はい、あなたのjqueryのコードの前にトップであなたのjQueryライブラリを置きます。それは動作しますし、イベントを書くの適切な方法は次のとおりです。 - jQueryのためのライトコードの後

jQuery('#event').on('click', function(){ 
      alert("hello world"); 
    }); 
0

置き、次のscriptタグを

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

まず輸入基本の.jsファイル:あなたはjQueryのため

$('#btnID').click(function(){ 
alert('welcome') 
}); 
関連する問題