Javascript jQuery click function doesn't work

Question

I have a very confusing problem. I want to do some action within an HTML site, when a link is clicked. I implemented the following code with a click event, which should handle this behaviour:

$(document).ready(function() {
  console.log("Ready!");
  $( "a" ).click(function() {
    console.log("Alert!");
    alert("Test");
  });
});

I implmented it in the head and at the end of the body but nothing happens. I don't get the console.log or alert. When I change the click to mouseover everything ist fine. Do you have any suggestions?

Regards, Jens

create a jsfiddle that shows your issue. which browser are you using? — geedubb
– geedubb, Commented Aug 9, 2014 at 9:36
I made a jsfiddle. I hope it will help you. Now while transforming my HTML to an example for jsfiddle I recognized somethin strange. I use JQuery 1.11.1 und JQuery UI 1.11. When the two js scripts are included everything is fine. When the css of JQuery UI comes along, the click doesn't work ... I'm a little bit confused - jsfiddle.net/niffchen/udL56ww6/1 — user1956194
– user1956194, Commented Aug 9, 2014 at 10:20

Yazan Rawashdeh · Accepted Answer · 2014-08-09 09:29:25Z

1

try using

$(document).ready(function() {
  console.log("Ready!");
  $( "a" ).on("click",function() {
    console.log("Alert!");
    alert("Test");
  });
});

because some versions of Jquery don't support the click function alone

answered Aug 9, 2014 at 9:29

Yazan Rawashdeh

1,0272 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

geedubb Over a year ago

Really? .click was added in V1.0. .click is shorthand for .on("click")

Football-Is-My-Life Over a year ago

.click is older than .on . .click was added in V1.0. and .on was added in V1.7 => please see : .click = api.jquery.com/click and .on = api.jquery.com/on

danbal · Accepted Answer · 2014-08-09 09:46:12Z

0

Is the a present when the page is loaded? If not, you need to modify your event binding a little. Also, you can try to prevent the default behavior.

$(document).ready(function() {
  console.log("Ready!");
  $(document).click("a", function(e) {
    e.preventDefault();
    console.log("Alert!");
    alert("Test");
  });
});

answered Aug 9, 2014 at 9:46

danbal

1,5513 gold badges14 silver badges19 bronze badges

1 Comment

user1956194 Over a year ago

I made a jsfiddle. I hope it will help you. Now while transforming my HTML to an example for jsfiddle I recognized somethin strange. I use JQuery 1.11.1 und JQuery UI 1.11. When the two js scripts are included everything is fine. When the css of JQuery UI comes along, the click doesn't work ... I'm a little bit confused - jsfiddle.net/niffchen/udL56ww6/1

user3422175 · Accepted Answer · 2014-08-09 09:51:38Z

0

The first thing that you need to do is check you jquery library to make sure that you have included it or not?

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

If it still doesn't work you should check your anchor attribute and change it like bellow

<a href="#">alert</a> or <a>alert</a>

So this code will work

 $(document).ready(function() {
  console.log("Ready!");
  $( "a" ).click(function() {
    console.log("Alert!");
    alert("Test");
  });
});

answered Aug 9, 2014 at 9:51

user3422175

111 silver badge1 bronze badge

Comments

lacostenycoder · Accepted Answer · 2014-08-09 10:11:16Z

0

Make sure to include Jquery in your head:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">    </script>
  <script>
  $(document).ready(function() {
  console.log("Ready!");
  $('a[href$="google"]').on("click",function() {
    console.log("Alert!");
    alert("Test");
  });
});
</script>
</head>
<body>
  <a href="google">google</a>
</body>
</html>

Otherwise you can get DOM elements by using: getElementsById and add id in your link

answered Aug 9, 2014 at 10:11

lacostenycoder

11.3k4 gold badges37 silver badges50 bronze badges

1 Comment

user1956194 Over a year ago

made a jsfiddle. I hope it will help you. Now while transforming my HTML to an example for jsfiddle I recognized somethin strange. I use JQuery 1.11.1 und JQuery UI 1.11. When the two js scripts are included everything is fine. When the css of JQuery UI comes along, the click doesn't work ... I'm a little bit confused - jsfiddle.net/niffchen/udL56ww6/1

Football-Is-My-Life · Accepted Answer · 2014-08-09 11:07:46Z

0

please see this : jsfiddle

$(document).ready(function() {
        console.log("Bereit!");
        $( "a" ).click(function() {
            console.log("Alert!");
            alert("BBB wurden mit dem CCC synchronisiert");
        });
    });

its works.

Are you sure you've added the correct version jQuery?

answered Aug 9, 2014 at 11:07

Football-Is-My-Life

1,4377 gold badges18 silver badges35 bronze badges

3 Comments

user1956194 Over a year ago

Yes i do. But I recognized, that if I implement the CSS of JQURY UI, that this problem appears. If I delete it, then it works as aspected ... consufing. You can see the jsfiddle above!

Football-Is-My-Life Over a year ago

see : <script type="text/javascript" src="./js/jquery-1.11.1.min.js". this is wrong in "jsfiddle.net". please upload jquery-1.11.1.min.js on "jsfiddle.net". like : <script type="text/javascript" src="www.jquery.com/js/jquery-1.11.1.min.js"></script>

user1956194 Over a year ago

Hello. Sorry, I forgot to post the new update link. This is my first time with jsfiddle ... jsfiddle.net/niffchen/udL56ww6/27. If you change the URls for the css files into nirvana than everything ist fine. If one of this css files is working you don't get alert box.

Collectives™ on Stack Overflow

Javascript jQuery click function doesn't work

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related