Simple Jquery Click not working in WordPress

Question

I have included jquery directly from CDN like

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> .

I have included my javascript file in the footer like

<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/javascript/tsblog.js"></script>

my javascript code is

jQuery( document ).ready(function($) {
 console.log( "ready!" );
 $("#start-reading").click(function() {
  console.log("click");
 });

});

One simple jQuery click function. Here in the console i can see the ready message. but on clicking the element with id start-reading nothing is happening.

Here is the markup

<button id="start-reading">
</button>

I'm new to wordpress , is there something wordpress realted which i'm doing wrong ? Because this is supposed to work in non-wordpress environment.

You need to use wp_enqueeue_script().

tao
– tao

2015-11-29 06:25:10 +00:00
Commented Nov 29, 2015 at 6:25 — tao
– tao, Commented Nov 29, 2015 at 6:25

tao · Accepted Answer · 2015-11-29 06:28:04Z

1

WP makes sure it only loads scripts once. So it collects all script requests from all plugins and decides the correct order based on dependencies and priority.

To correctly add your script in WordPress you need to use wp_enqueue_script().

answered Nov 29, 2015 at 6:28

tao

91.1k18 gold badges138 silver badges174 bronze badges

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

Comments

Kvvaradha · Accepted Answer · 2015-11-29 13:59:54Z

1

Keep use jQuery instead of $. Just like the below code.

     jQuery(document).ready(function() {
          console.log( "ready!" );
         jQuery("#start-reading").click(function() {
                console.log("click");
          });

     });

Check your element ID whether it's #start-reading

Or #start_reading.

answered Nov 29, 2015 at 13:59

Kvvaradha

8421 gold badge15 silver badges29 bronze badges

3 Comments

Milo Over a year ago

you can pass $ as an argument to the function and use $ inside, as per the example on the wp_enqueue_script page in codex.

Kvvaradha Over a year ago

Of course we can pass it as an argument and work on. But if he uses any other framework that will trouble it some time. It's just an try. If it works than it might be a conflict.

Milo Over a year ago

it will not conflict. when you define a var in a function it is locally scoped to that function. it's a different var than the $ that would be defined outside the function by another framework, and both can coexist.

Nasir Ahmed · Accepted Answer · 2015-11-29 06:26:56Z

0

Use the recommended way, add these code to functions.php

function your_theme_scripts() {

    wp_enqueue_script( 'your-theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '', true );

}

add_action( 'wp_enqueue_scripts', 'your_theme_scripts' );

jQuery is already integrated to WordPress, now you can wirte jQuery code to the script.js file.

answered Nov 29, 2015 at 6:26

Nasir Ahmed

5193 silver badges14 bronze badges

1 Comment

Sooraj Over a year ago

I already tried that. In that case even the ready message is not printing.

Anar Salimkhanov · Accepted Answer · 2020-07-19 07:31:33Z

0

If it is a dynamically added button (e.g. during the execution of some code), you can use onclcick in the HTML code of the button.


jQuery('#parent')
    .html('<button onclick="test_func()">Test</button>');

BUT the declaration of the target function ( test_func() ) must be in the root of the file (not function in function)

answered Jul 19, 2020 at 7:31

Anar Salimkhanov

84712 silver badges15 bronze badges

Comments

Yergalem · Accepted Answer · 2023-11-10 21:58:55Z

0

Use wp_enqueue_script as follows and I figured the last argument which flags for in footer print as mandatory. Last argument makes difference.

wp_enqueue_script( 'custom_script_unique_handle_name', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '', true );

answered Nov 10, 2023 at 21:58

Yergalem

1,77318 silver badges14 bronze badges

Collectives™ on Stack Overflow

Simple Jquery Click not working in WordPress

5 Answers 5

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related