jQuery click event not working in Wordpress page

Question

I've been trying for a few hours now to figure out why my jquery code does not work when added as a page in Wordpress.

As a standalone page everything works just fine but when converted to a Wordpress page jQuery click event does not fire anymore.

My jQuery code looks like this currently:

jQuery(document).ready(function() {
    jQuery('button#convert').click(function() {
        alert("test");
        var text = jQuery('textarea#textInput').val();
        var method = jQuery('select#methodOptions').val();

        if (text!='')
        {
            $.ajax({
                url: 'core/convert.php',
                type: 'POST',
                data: 'data=' + text + '&method='+ method,
                dataType: 'html',
                success: function( message) {
                    jQuery('textarea#textOutput').val(message);
                }
            });
        }
    });
});

My button looks like this in html

<button id="convert" class="convertbutton" type="button">Convert</button>

Also I can verify that the .js file that contains the above script is loading properly in the header and that also the jquery library is as well. Am I missing something ? Thanks in advance.

Edit: I found what the issue was, Wordpress was loading the jquery library in the footer where I was loading my .js in the header which was the reason the problem appeared since the library needs to be loaded before you call any scripts for obvious reasons.

Also $.ajax should be jQuery.ajax in noConflict mode.

are any errors thrown when your event is meant to fire (check the console)? — CodePB, Mar 18 '13 at 22:57
Error: ReferenceError: jQuery is not defined Source File: .../scripts/functions.js Line: 1. jquery is on noConflict. Throws the same error but for $ if the code above isnt for noConflict. This is the js code in the header — coolmine, Mar 18 '13 at 23:04
Thanks for the console reminder pburgess, it really helped to pinpoint the problem. — coolmine, Mar 18 '13 at 23:25
No problem, easy to forget, but often the simplest way to solve the problem. It would probably be best if you posted your solution as an answer, and accepted it, just to make it obvious to others who may have similar issues. — CodePB, Mar 19 '13 at 08:36

coolmine · Accepted Answer · 2018-11-15T18:21:52.923

5

The issue appeared to be something less straight forward then error in the code. One of the Wordpress plugins was forcing the majority of the .js files to load in footer instead in header supposedly to improve loading times.

The problem was that I was loading my .js file in the header which caused my javascript code to be executed before the jquery library was loaded resulting in an error.

The solution was make sure my .js file loaded in the footer, something that could be accomplished by changing add_action('wp_head', '<js method>'); to add_action('wp_footer', '<js method>');. Also there was a small error in the code. When jquery is in no confict mode $.ajax should be jQuery.ajax.

edited Nov 15 '18 at 18:21

answered Mar 19 '13 at 15:10

coolmine

4,427
2
33
45

This was the solution to my problem. I was loading javascript in my Wordpress plugin via wp_enqueue_script( 'frontend', plugins_url('/js/frontend.js', __FILE__ ), array('jquery') and add_action( 'wp_enqueue_scripts' ... . In order for my javascript to load AFTER jQuery, despite using wp_enque, was to replace the first code snippet with wp_enqueue_script( 'frontend', plugins_url('/js/frontend.js', __FILE__ ), array('jquery'), false, true); The last 'true' flag loads my script last http://codex.wordpress.org/Function_Reference/wp_enqueue_script – possiblyLethal Oct 10 '14 at 07:40
you are the efing best brother – karlosuccess Nov 15 '18 at 16:40

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

Try:

if (text != 'undefined')

or

if (text != null)

See here for AJAX example.

EDIT:

Take out the 'button' before the selector in click function. (#convert, not button#convert) Also check out .find

Make sure you are including your jquery in the body of HTML. Please include fiddle if possible.

I've also had issues in the past with the Jquery(); Write your code like this:

$(document).ready(function(){
// etc etc
$('#convert').click( //etcetc

edited May 23 '17 at 12:08

Community

1
1

answered Mar 18 '13 at 22:58

greycode

113
5
16

Sadly not even the alert pops up so the problem happens before that line. – coolmine Mar 18 '13 at 23:00
That wasn't the issue, will update my question with what the issue was. – coolmine Mar 18 '13 at 23:15

score 0 · Answer 3 · answered May 30 '22 at 08:03

0

Seems look your element is loaded after DOM and not exist when document is ready, try this:

jQuery(document).ready(function() {
  $('body').on('click', 'button#convert', function(e) {
    alert("test");
  });
});

answered May 30 '22 at 08:03

Mitre sadas

1

jQuery click event not working in Wordpress page

3 Answers3