jquery - How to get a javascript alert?

I'm definitely not a newbie to scripting, but this just boggles my mind. I want to invoke a function on a button click, so I first wanted to grab the buttonclick event and test that with a simple window.alert. So I just wrote the html document below.

<!doctype html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#sendButton").click(function(){
                    alert("clicked!!");
                });
            });
        </script>
    </head>
    <body>

        <form id="send-message-area">
            <input type="button" id="sendButton" value="Send Message">
        </form>
    </body>

Unfortunately, nothing happens. At all. Since this is fairly simple code, I have no clue why this wouldn't work.

<!doctype html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#sendButton").click(function(){
                    alert("clicked!!");
                });
            });
        </script>
    </head>
    <body>

        <form id="send-message-area">
            <input type="button" id="sendButton" value="Send Message">
        </form>
    </body>

Unfortunately, nothing happens. At all. Since this is fairly simple code, I have no clue why this wouldn't work.

Share Improve this question edited Feb 5, 2014 at 12:51 Liath 10.2k10 gold badges54 silver badges82 bronze badges asked Feb 5, 2014 at 12:49 kramer65 54k133 gold badges331 silver badges523 bronze badges

What happens if you put your alert outside the click? I want to know if doc.ready() isn't being called or the click – Liath Commented Feb 5, 2014 at 12:51
1 It works.... jsfiddle/HbUs3 – Milind Anantwar Commented Feb 5, 2014 at 12:51
2 Are you viewing your file locally? – Allan Kimmer Jensen Commented Feb 5, 2014 at 12:55
1 Think this is a close-candidate. We can continue guessing out of the blue, but obviosuly this is caused by some local wrong setup, error in other code than the shown, a firewall preventing using the CDN or 1000 other things - it should work and it is impossible to guess why it does not on kramer65's localhost. – davidkonrad Commented Feb 5, 2014 at 13:03
1 @davidkonrad Ya, and OP still didn't answer simple questions as which browser he's testing it? Is it local file without server? Any error in console? Etc, etc... – A. Wolff Commented Feb 5, 2014 at 13:08

| Show 6 more ments

8 Answers 8

Sorted by: Reset to default 4

Your script tag to pull in jQuery is using the (Common|General) Internet Syntax Scheme. This tells the browser to use whatever scheme was used to load the page in loading the script. It is helpful for sites which respond to both http and https.

If you are viewing your file locally using the file:// scheme, then you should see an error that $ is not defined. This is because the script does not live at:

file://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js

Please use this src in the script tag when loading locally:

<script src="http://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Path to src should be plete if you have hosted it somewhere.You have not added correct path to jquery library. Everything will work accordingly once you do that.

<script src="http://code.jquery./jquery-latest.js"></script>

Demo

According to your url starting with // the browser tries to load that file from your local file system if you're locally testing your site using an url like file://. In that case you're not loading jQuery, so the $ is undefined and your code never executed.

Use the script tag like that for local tests:

<script src="http://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>

If you run your site on a web server, the cdn-style starting with // will work again.

Code looks fine

I think you are testing in IE < 9 (jQuery 2.x not supporting IE 8)

Please change the browser or load jQuery version like 1.9 and test it

You have to update query script src to 'http://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js'

I remend to download the jQuery script then add it to your project locally instead of the remote one

use <script type="text/javascript" src="http://code.jquery./jquery-1.10.1.min.js"> and practise to insert html tag

HTML:

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery./jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#sendButton").click(function(){
                    alert("clicked!!");
                });
            });
        </script>
    </head>
    <body>

    <form id="send-message-area">
        <input type="button" id="sendButton" value="Send Message">
    </form>
</body>
</html>

You are missing to include http:/ in your script src.

Either change your script tag like this:

 <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>

or download the Jquery file and refer locally.

Change your path to

<script src="http://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>

and try to use jquery 1.10 for less than ie9 browser

<!--[if lt IE 9]><script src="http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script><![endif]-->
<!--[if IE 9]><!--><script src="http://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script><!--<![endif]-->

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

jquery - How to get a javascript alert? - Stack Overflow

8 Answers 8

与本文相关的文章

评论列表(0)