jQuery click() event

Question

What is wrong in this piece of html code with some jquery functions? I don't understand why is not working jquery functions! Thanks!

<html>
<head>  
    <style> 
      p { color:red; margin:5px; cursor:pointer; } 
      p.hilite { background:yellow; } 
     </style> 

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 

    <script type="text/javascript">

        $("p").click(function () {
            $(this).slideUp();
            return false;
        });

        $("p").hover(function () {
            $(this).addClass("hilite");
        }, function () {
            $(this).removeClass("hilite");
        }); 
    </script> 
</head>
<body>
    <h2>Click</h2>

    <p>First Paragraph</p> 
    <p>Second Paragraph</p> 
    <p>Yet one more Paragraph</p>
</body>
</html>

Me either ! What is not working? the event is not trigger? trigger twice ? — David Laberge
– David Laberge, Commented Dec 14, 2011 at 11:47

Matteo Mosca · Accepted Answer · 2011-12-14 11:47:47Z

4

Your bindings are executed before the DOM is ready, as you didn't wrap them in the $(function() {}) so the paragraphs do not exist when the bindings are performed.

EDIT

Sample code:

$(function() {
        $("p").click(function () {
            $(this).slideUp();
            return false;
        });

        $("p").hover(function () {
            $(this).addClass("hilite");
        }, function () {
            $(this).removeClass("hilite");
        }); 
});

answered Dec 14, 2011 at 11:47

Matteo Mosca

7,4684 gold badges47 silver badges81 bronze badges

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

1 Comment

Matteo Mosca Over a year ago

As I suggested. Wrap your code in the $(function() { //your code here })

David Laberge · Accepted Answer · 2011-12-14 11:50:16Z

change your code to :

<html>
<head>  
<style> 
  p { color:red; margin:5px; cursor:pointer; } 
  p.hilite { background:yellow; } 
 </style> 

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 

<script type="text/javascript">
    $(document).ready(function(){ // that is trigger when the document is loaded
       $("p").click(function () {
        $(this).slideUp();
        return false;
       });

       $("p").hover(function () {
        $(this).addClass("hilite");
       }, function () {
        $(this).removeClass("hilite");
       });
    });

</script> 
</head>
<body>
<h2>Click</h2>

<p>First Paragraph</p> 
<p>Second Paragraph</p> 
<p>Yet one more Paragraph</p>
</body>
</html>

Community · Accepted Answer · 2017-05-23 12:06:40Z

0

@david-laberge, There is no need to put click() event inside the document.ready() if it is not an event that have to be executed only after document has been ready.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Sep 25, 2014 at 9:15

Manikandan Arunachalam

1,5003 gold badges17 silver badges33 bronze badges

Comments

Manikandan Arunachalam · Accepted Answer · 2014-10-31 13:50:40Z

0

Just put your <script>....</script> at the end of your body tag and put an alert() inside the click event to know.It will work..

answered Oct 31, 2014 at 13:50

Manikandan Arunachalam

1,5003 gold badges17 silver badges33 bronze badges

Collectives™ on Stack Overflow

jQuery click() event

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related