Click event not working only when used in external JS file

Question

Click event not working only when used in external JS file

745 Views Asked by Stephane At 03 April 2025 at 11:22

when used in external main.js (see content below), only the "ready!!" text shows up. But when used inline without referencing the main.js (see below too) both "ready!!" and "clicked!!" text are displayed. Any idea why did I miss here ?

page content case 1

<!DOCTYPE html>
<html lang="en">    
<head>
    <meta charset="UTF-8">
    <title>Test</title>    
    <script type='text/javascript' src='http://mywpblog.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>    
</head>    
<body>
    <button class="purchase-test" type="button"></button>    
    <script type='text/javascript' src='http://mywpblog.com/wp-content/plugins/mytestplugin/assets/js/main.js?ver=3.0.1'></script>
</body>    
</html>

page content case 2

<!DOCTYPE html>
<html lang="en">    
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script type='text/javascript' src='http://mywpblog.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
</head>    
<body>
    <button class="purchase-test" type="button"></button>
    <script>
        JQuery(document).ready(function() {
            console.log("ready!!"); // WOKRS FINE
            JQuery('.purchase-test').click(function(e) {
                console.log("clicked!!"); // WOKRS FINE AS WELL
            });
        });
    </script>
</body>
</html>

main.js

JQuery(document).ready(function() {
    console.log("ready!!"); // WOKRS FINE
    JQuery('.purchase-test').click(function(e) {
        console.log("clicked!!"); // DOES NOT WORK
    });
});

Original Q&A

There are 1 best solutions below

**Bioto** · Answer 1

$(function() {
    $('.purchase-test').on("click", function(event) {
        // If '.purchase-test' is a link: 
        // <a href="" class="purchase-test">A Link</a>
        // You must preventDefault
        event.preventDefault()

        // Log to console
        console.log("Clicking Purchase test");
    });
    $('.non-purchase-test').on("click", function(event) {
       console.log("Clicking Non Purchase Test");
    });
    $(".purchase-test-button").on("click", function(event) {
       console.log("Clicking on Button"); 
    });
});

https://jsfiddle.net/cpcmn41z/1/

Click event not working only when used in external JS file

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CLICK

Trending Questions

Popular # Hahtags

Popular Questions