Adding Event to jQuery

Question

Can someone tell me why I cannot add the handler separately and instead I have to do something like below to make it work ?

My question is why I should add the code for hiding the paragraph inside the $(document).ready() to make it work.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    alert('test');
});
</script>
<script>
$("p").click(function(){
        $(this).hide();
    });
    </script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

Working code-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

In first code snippet your click event is not defined in document.ready function — Maharshi
– Maharshi, Commented Feb 28, 2017 at 4:09
There's another option that will work: put the JS at the end of the body, after the elements it tries to reference. — nnnnnn
– nnnnnn, Commented Feb 28, 2017 at 5:03

Death-is-the-real-truth · Accepted Answer · 2017-02-28 05:23:55Z

3

The problem in the first snippet is jQuery code registered before the document is loaded so it will not going to recognize any HTML element. And hence it will not work.

Solution:-

1.Either put your code at the bottom of the page (in case of first one).

2.Or wrap your code inside ($(document).ready(function(){..});) which you have already done in second code.

In both above cases HTML element are loaded properly and registered before your jQuery code and hence your code will start working

edited Feb 28, 2017 at 5:23

answered Feb 28, 2017 at 4:18

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

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

Comments

Veshraj Joshi · Accepted Answer · 2017-02-28 04:26:04Z

1

$(documet).ready(function(){}) executes only after all DOM elements parsed in page irrespective of location. When you write code without ready function then code executes sequentially. If javascript code is placed before DOM element appearance it will not work. If you place(1st case) -

<script>
$("p").click(function(){
    $(this).hide();
});
</script>

Just before body tag, it will work as expected - to be sure all DOM elements parsed in page make use of $(documet).ready(function(){}).

edited Feb 28, 2017 at 4:26

answered Feb 28, 2017 at 4:16

Veshraj Joshi

3,5874 gold badges32 silver badges51 bronze badges

Comments

Maharshi · Accepted Answer · 2017-02-28 04:40:39Z

1

Change it as following..

$(document).ready(function(){
    alert('test');
    $("p").click(function(){
        $(this).hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

edited Feb 28, 2017 at 4:40

answered Feb 28, 2017 at 4:10

Maharshi

1,1981 gold badge14 silver badges38 bronze badges

3 Comments

nnnnnn Over a year ago

Isn't that what the OP is already doing in their second example? They're asking why the first way fails and the second way works.

Maharshi Over a year ago

I gave him code. developer can understand the difference.

nnnnnn Over a year ago

"My question is why I should add the code for hiding the paragraph inside the $(document).ready() to make it work." - You didn't even attempt to answer the question, and the code you showed seems the same as what the OP said he already had that worked, but with an added alert.

Gaurav Chaudhary · Accepted Answer · 2017-02-28 05:13:00Z

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to the 'click' handler.

You could implement it in following ways:

Include the script at the end of the body of the HTML which is always the best practice.
Wrap your handling code into a function and call that function inside document.ready() or body.onload(). document.ready() is preferred as it does not wait for the resources like images and attach the events right after the HTML content is loaded.
Use delegated events to attach event handlers. Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

I would do it like this:

(function(){
  $('p').on('click',function(){
    $(this).hide();
  });
})();

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    alert('test');
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

<script src=""></script>
</body>
</html>

Collectives™ on Stack Overflow

Adding Event to jQuery

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related