CODEWITHSUNDEEP
javascriptjquery
agates
agates

Reputation: 15

jQuery not reading the click

So my jQuery looks alright but for some reason when I click the button the console.log doesn't fire. Anyone know why this might be?

This is the link to the jQuery that I have used. Sorry for the confusion. This one is up in the header. Although it still is not working.

<head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type = "text/javascript"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Email Parser GUI</title>
        <link rel="stylesheet" type="text/css" href="Styles.css" />
        <script>

                $(document).ready(function(){
                    console.log("TEST ABOVE CLICKS");

                    $("#btnOn").click(function() {
                        console.log("TEST btnOn");
                        var value = 1;
                        $.ajax({
                        type: "POST",
                        url: "URLphp",
                        data: {value : value},
                        dataType: "json",
                        async: true,
                        beforeSend: function(){
                            console.log("check before send of ajax in btnOn");
                        },
                        success: function(data) {
                            console.log(data);
                        }
                        }); 
                     });

                    $("#btnOff").click(function() {
                        console.log("TEST btnOff");
                            var value = 0;
                            $.ajax({
                            type: "POST",
                            url: "URL.php",
                            data: {value : value},
                            dataType: "json",
                            async: true,
                            beforeSend: function(){
                                console.log("check before send of ajax in btnOff");
                            },
                            success: function(data) {
                                console.log(data);
                            }
                            }); 
                    });
                });
                </script>
    </head>

Then in the body tags

<div class="form-group">
            <label class="col-md-4 control-label" for="btnOn">On/Off</label>
                <div class="col-md-8">
                    <button id="btnOn" name="btnOn" value="1" class="btn btn-success">On</button>
                    <button id="btnOff" name="btnOff" value="0" class="btn btn-danger">Off</button>
                </div>
            </div>

Any help would be appreciated. Thanks.

Upvotes: 0

Views: 98

Answers (4)

Sandy
Sandy

Reputation: 1

<head>
<script 
 src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 </head>
 <body>
 <button id="btnOn" name="btnOn" value="1" class="btn btn-
 success">On</button>
 </body>
 <script>
 $(document).ready(function () {
    alert("TEST!!!!!!");
    $("#btnOn").click(function () {
        console.log("TEST btnOn");
        var value = 1; $.ajax({
            type: "POST",
            url: "URL.php",
            data: { value: value },
            dataType: "json",
            async: true,
            beforeSend: function () {
                console.log("check before send of ajax in btnOn");
            },
            success: function (data) {
                console.log(data);
            }
        });
    });
  });
</script>


 ----------

 <b>Do it like this It Will work !!!</b>

Upvotes: 0

Paolo
Paolo

Reputation: 15827

Both in the code snippet and in the code posted in the question you missed to enclose the javascript code between <script> tags:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        console.log("TEST!!!!!!");
        $("#btnOn").click(function() {

            // ...

        });
    });
</script>

Upvotes: 0

sham
sham

Reputation: 1248

Try this:

1) Check that you actually have jQuery enabled

2) Try Dan Philip's answer, using .on instead of .click :

 $("body").on("click", "#btnOn", function() {
    console.log("TEST btnOn");
 });

3) Compare your code and the code in the snippet, silly mistakes always happen and perhaps you missed a letter in some selector. An easy way to check is to create a brand new button.

Upvotes: 0

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

Try using jQuery on,

 $("body").on("click", "#btnOn", function() {
    console.log("TEST btnOn");
 });

Upvotes: 2

Related Questions