Javascript/jQuery newbie mistake with mouseenter event causing syntax error

Question

I am trying to apply a style when the mouseenter event is triggered, but if I uncomment the following untouched selector - even the document ready stops working.

<body>
<div id="1" class="button untouched"></div>
<script src="/jquery.js"></script>
<script>
$(document).ready(function(){
    alert("JQuery is working");
});

/*
$(".untouched").mouseenter($function(){
    $(this).addClass("touched");
});
*/
</script>
</body>

I am following the example found at:

http://api.jquery.com/mouseenter/

And I get the following error in Firebug:

missing ) after argument list
[Break On This Error]   

$(".untouched").mouseenter($function(){

Since it does not work, I've made a mistake, but I don't know what. All I know is that none of my code works if I let that run. I downloaded the latest 1.7.2 version of jQuery, which I know is available on the page because the alert() runs with the other commented out.

@JaredFarrish How could I have detected this typo - I am used to compiled languages? — Adrian Cornish
– Adrian Cornish, Commented Jun 8, 2012 at 1:50
@AdrianCornish Run your code in a browser with a console (most modern browsers have one built in). I use Chrome and hit F12. If you got to the console tab in the Developer Tools that come up you'll see any Javascript errors. — Paul
– Paul, Commented Jun 8, 2012 at 1:51
Since I imagine this won't be going anywhere, I edited the question to make it more specific to the actual problem it describes. Feel free to correct anything I got wrong. — Jared Farrish
– Jared Farrish, Commented Jun 8, 2012 at 2:58

Bart Wegrzyn · Accepted Answer · 2012-06-08 01:39:57Z

4

No need for the $ in front of the function. Also, the mouseenter event function code should be inside the document ready.

<script>
     $(document).ready(function(){
         alert("JQuery is working");

         $(".untouched").mouseenter(function(){
             $(this).addClass("touched");
         });
     });
</script>

answered Jun 8, 2012 at 1:39

Bart Wegrzyn

2,2921 gold badge16 silver badges16 bronze badges

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

Comments

Ayush · Accepted Answer · 2012-06-08 01:39:09Z

2

In your script the $(".untouched") part should be within the ready function. Also,

mouseenter($function(){ the $ sign is not correct.

Your final script should look like this:

$(document).ready(function(){
    alert("JQuery is working");

    $(".untouched").mouseenter(function(){
        $(this).addClass("touched");
    });
});

answered Jun 8, 2012 at 1:39

Ayush

42.5k52 gold badges169 silver badges243 bronze badges

7 Comments

Paul Over a year ago

There is no reason to move the code into $(document).ready. alert("JQuery is working"); doesn't need to be inside it either in fact.

Jared Farrish Over a year ago

@PaulP.R.O. - You mean the reason it's not needed in the doc.ready is because the element it's referencing is already in the DOM?

Paul Over a year ago

@JaredFarrish Yeah. Why would you wait for the entire DOM to be ready when you could do it right away :)

Jared Farrish Over a year ago

@PaulP.R.O. - I wanted to make sure that was clarified. The original comment, for a beginner, could easily be confusing. My opinion, this question should be closed as too local.

Jared Farrish Over a year ago

@AdrianCornish - With so many like this, it's either a duplicate or of low value overall. It would be very hard for someone to intentionally find this question for their problem, so it's just noise IMO. No big deal. Also, I would review PaulP.R.O.'s answer, his suggestion is probably a good one.

|

Paul · Accepted Answer · 2012-06-08 01:40:40Z

2

You have an extra $ you shouldn't in front of the word function. You probably also want to remove the untouched class:

$(".untouched").mouseenter(function(){
    $(this).removeClass("untouched").addClass("touched");
});

answered Jun 8, 2012 at 1:40

Paul

142k28 gold badges285 silver badges272 bronze badges

1 Comment

Adrian Cornish Over a year ago

I was wondering about removing the class - since the add is relying on CSS replace rules. I am still trying to get my head round jquery syntax - from a c++ world :-) - I previously had something similar as 2 LOCS - but that seems more in jquery style.

Scott Selby · Accepted Answer · 2012-06-08 01:49:19Z

1

You can easily perform this right from css

    .untouched 
       {
       background: green;
      }

    .untouched :hover
      {
       background: blue
       }

In JQuery if you want to use .mouseover you need to functions - one for when you put the mouse over, one for when the mouse isn't over. This is easier in css , there is just a :hover filter

       $('.untouched').mouseover(function() {
               $(this).addClass('touched');
                     });
       $('.untuoched').mouseout(function() {
              $(this).removeClass('touched');
                      });

answered Jun 8, 2012 at 1:49

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

1 Comment

Adrian Cornish Over a year ago

Thanks Scott. Actually I wanted to create the sort of Android type lock screen by passing the mouse over the grid to select a pattern - I simplified because it was not working. Once the 'password' is picked I wanted to unlock a new screen.

Collectives™ on Stack Overflow

Javascript/jQuery newbie mistake with mouseenter event causing syntax error

4 Answers 4

Comments

7 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related