Search code examples
javascriptjquerygoogle-chrome-extensionevent-handlingjquery-events

jQuery event handlers do not work in Chrome popup.js

I have a popup.html which loads jQuery and then popup.js. I am trying to change the cursor when I hover over a div with a certain class but this is not happening.

popup.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <link type="text/css" rel="stylesheet" href="css/fbh-ui.css" />
    <script type="text/javascript" src="js/jq.js"></script>
    <script type="text/javascript" src="js/popup.js"></script>
</head>

<body style="width: 200px">
    <div id="fbh-main">
        <div class="fbh-popup-menu-item" id="fbh-popup-enabled"></div>
    </div>
</body>

popup.js

$(document).ready(function() {
    $('.fbh-popup-menu-item').mouseenter(function() {
        this.css('cursor', 'pointer');
    });

    $('.fbh-popup-menu-item').mouseleave(function() {
        this.css('cursor', 'default');
    });
});

This code should work. The DOM elements already exist so there is no reason for it not to.

Solution

  • The way you are writing this function is wrong, It has to be like $(this):

    Below is the updated Code:

     $(document).ready(function() {
        $('.fbh-popup-menu-item').mouseenter(function() {
            $(this).css('cursor', 'pointer');
        });

        $('.fbh-popup-menu-item').mouseout(function() {
            $(this).css('cursor', 'default');
        });
    });