CODEWITHSUNDEEP
jquery
VPY
VPY

Reputation: 463

Adding Event to jQuery

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>

Upvotes: 2

Views: 89

Answers (4)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72289

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

Upvotes: 3

Gaurav Chaudhary
Gaurav Chaudhary

Reputation: 1501

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:

  1. Include the script at the end of the body of the HTML which is always the best practice.

  2. 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.

  3. 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>

Upvotes: 1

Maharshi
Maharshi

Reputation: 1198

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>

Upvotes: 1

Veshraj Joshi
Veshraj Joshi

Reputation: 3579

$(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(){}).

Upvotes: 1

Related Questions