Jquery button click detection

Question

I have a div class in my html file named 'btn'. In my Javascript file I use jquery to detect clicks on that btn. When the jquery function to detect clicks is written in the global scope,the function doesn't work,but when I put it inside another function and call it using developer tool console,it works. Can somebody help me out with this please?

Code for reference-

$(".btn").click(function() {
   console.log('Clicked');
}

This below code works-

function clickDetection(){
   $(".btn").click(function() {
   console.log('Clicked');
   }
}

It sounds like you've forgotten to use a document.ready handler in the first example, and the second works because you call clickDetection() after the DOM has loaded (even though that example is missing a )) — Rory McCrossan
– Rory McCrossan, Commented Feb 26, 2020 at 10:14
$(document).on('click', '.btn', function() { console.log('Clicked'); } try this.. — sourav satyam
– sourav satyam, Commented Feb 26, 2020 at 10:20

RainyRain · Accepted Answer · 2020-02-26 10:49:24Z

2

Add the function in the document.ready function of jquery. This adds the eventlistener to the button after the page is loaded. Example:

$(document).ready(() => {
  $('.test-button').on('click', () => {
    console.log('Clicked');
  });
});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>click button demo</title>
</head>

<body>
    <button class="test-button">Click me</button>
</body>

</html>

To quote jQuery docs:

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated event handlers to attach event handlers.

See more at: https://api.jquery.com/on/

edited Feb 26, 2020 at 10:49

answered Feb 26, 2020 at 10:19

RainyRain

3052 silver badges10 bronze badges

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

2 Comments

Sushmit Chakraborty Over a year ago

Thankyou very much. Can you please explain why it does not work when written without document ready? For example if I type in alert('Hi'); it instantly pops up after loading the page,but in this case it doesnot read the onclick jquery.

RainyRain Over a year ago

@SushmitChakraborty You were trying to add an event listener to an object that was not yet present in the DOM, see the quote at the bottom of the answer for the explanation of jQyery. The second case works because you probably run that function after the element was added to the DOM.

Collectives™ on Stack Overflow

Jquery button click detection

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related