Click function running on load

Question

Can anybody tell me why is this click function running on load, I'm running it from wordpress?

jQuery(document).ready(function($){
    $('.scroll_Top').click(function(e){
        console.log("Hello");   
    });
});

Answer 1

You most likely have something triggering the click event on that element, or perhaps you have some other code somewhere that is logging Hello, because your function, as written, won't trigger without the element being clicked on.

I'd make sure you don't have any superfluous event/click handlers on that element in other scripts, as well as make sure console.log("Hello") isn't coming from another source (you may want to consider changing your 'diagnostic output' to something more aking to what's actually happening as well. For instance, consider changing your code to console.log( 'Scroll Top was clicked' ) so you can rule out erroneous event handlers.

Take a look at this example, you'll see both forced console logs run, but your Hello isn't logged until the div is clicked - which means you've got something going on elsewhere.

Side note, you may consider using .on instead of .click.

jQuery(document).ready(function($){
    console.log( 'jQuery Loaded' );
    $('.scroll_Top').click(function(e){
        console.log("Hello");   
    });
    console.log( 'Functions defined. Shutting down' );
});

.scroll_Top {
  border: 1px solid #0095ee;
  padding: 20px;
}

.scroll_Top:hover {
  cursor: pointer;
  background: #0095ee;
  color:#fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<div class="scroll_Top">Scroll Top (click me)</div>