jQuery click event not working in WordPress page

1 Views

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.

Read More

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.

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. 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.

  2. 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

  3. 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");
  });
});