JQuery click and hover doesn't work on div

Question

I have a div declared as follow, but the click event doesn't work. I also need to use the :hover event in the css, but it doesn't work as well. What's the problem ?

<div id="info-button" class="info-button"></div>

the css

.info-button {
    position:absolute;
    top:-200px;
    left:50px;
    background-image: url('../img/info-icon.png');
    background-size: 100%;
    background-position: 0px 0px;
    width: 89px !important;
    display: inline-block;
    height: 89px;
    background-repeat: no-repeat;
}

JQuery

$("#info-button").click(function() {
    alert("click");  
});

I also tried

$("#info-button").on("click", function () {
    alert("click");
});

Are you registering click event in (document).ready or not ? — Urvi
– Urvi, Commented Aug 19, 2015 at 9:09
$(function(){ $("#info-button").click(function() { alert("click"); }); }); — Dimag Kharab
– Dimag Kharab, Commented Aug 19, 2015 at 9:12
Your code works. Error is elsewhere. CSS Hover needs : '.info-button:hover { background-color:blue;} — 3pic
– 3pic, Commented Aug 19, 2015 at 9:18

Nico · Accepted Answer · 2015-08-19 09:19:07Z

1

Be sure to put your code inside document.ready

$( document ).ready(function() {
   $("#info-button").click(function() {
    alert("click");  
    });
});

And include properly your script in your HTML document after Jquery, example:

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/your_script.js"></script>

answered Aug 19, 2015 at 9:19

Nico

7,2764 gold badges26 silver badges42 bronze badges

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

2 Comments

Bikas Over a year ago

Based on placement of code, document.ready is not requirement, unless code is defined before the BODY itself

Luca Over a year ago

The problem was the document.ready ! Incredible. But the mouse hover event in the css doesn't work anyway. Another kind of problem for sure but I haven't solved it yet.

Bikas · Accepted Answer · 2015-08-19 09:11:18Z

1

Works perfectly fine. See the JSBin.

http://jsbin.com/lusiyalusu/edit?html,js,output

EDIT: Just saw you CSS, I think your DIV might be drawing outside the body, if its parent DIV. You've top set to negative value in absolute postioning.

.info-button {
    position:absolute;
    top:-200px;
    left:50px;
    background-image: url('../img/info-icon.png');
    background-size: 100%;
    background-position: 0px 0px;
    width: 89px !important;
    display: inline-block;
    height: 89px;
    background-repeat: no-repeat;
}

You can check if this is the case

answered Aug 19, 2015 at 9:11

Bikas

2,76918 silver badges33 bronze badges

1 Comment

Bikas Over a year ago

then you must not include JavaScript before body, it's blocking and essentially bad practise to do

Mansukh Khandhar · Accepted Answer · 2015-08-19 09:32:28Z

0

Working Example

$("#info-button").click(function() {
    alert("click");  
});
$("#info-hover").hover(function() {
    alert("hover");  
});

.info-button {
    background-color: #f0f0f0;
    background-image: url("../img/info-icon.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: inline-block;
    height: 89px;
    
    
    width: 89px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info-button" class="info-button"></div>

<div id="info-hover" class="info-button"></div>

answered Aug 19, 2015 at 9:32

Mansukh Khandhar

2,5821 gold badge23 silver badges30 bronze badges

Collectives™ on Stack Overflow

JQuery click and hover doesn't work on div

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related