forms - jQuery will not work on page from snippet or file

admin管理员组

文章数量:1279207

I've been banging my head against the wall on this, My jQuery code runs perfect in CodePen, the WP site in console also runs it perfect, however I simply can not get it to run on the actual WooCommerce My Account Billing Address page no matter what.

My jQuery:

jQuery(document).ready(function () {
    // Your code in here
    jQuery('#billing_test').on('change', function () {
        myFunc();
    })
    function myFunc() {
        // your function code
        var complex_name = jQuery('#billing_test').val();

        var suburb = jQuery('#billing_suburb').val();

        if (complex_name == 'mr') {
            alert('works');
            jQuery("#billing_suburb").val('LDM');
            jQuery('#billing_postcode').val('5000');
        }
    }
})

I've tried adding via Code Snippets to no luck so tried a script file with the following code:

function my_theme_scripts() {
    wp_enqueue_script( 'test', get_template_directory_uri() . '/js/test.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

But still nothing. Any and all help will be really grateful as I've attempted everything I could but still nothing.

I have also tried replacing the $ with jQuery, tried the $.noConflict() as well.

Added script manually and it is in the inspect as well.

HTML

<p class="form-row my-css" id="billing_test_field" data-priority=""><label for="billing_test" class="">Test</label><span
        class="woocommerce-input-wrapper"><select name="billing_test" id="billing_test" class="select "
            data-allow_clear="true" data-placeholder="Title">
            <option value="">Please select</option>
            <option value="mr">Mr</option>
            <option value="ms" selected='selected'>Ms</option>
        </select></span></p>

How do I not use if and else if to match the conditions:

if (complex_name == 'eldogleneast') {
   jQuery("#billing_suburb").val('ELD');
   jQuery('#billing_postcode').val('0157');
}
    else if (complex_name == 'eldoglen'){
                jQuery("#billing_suburb").val('ELD');
   jQuery('#billing_postcode').val('0157');
             }

I've been banging my head against the wall on this, My jQuery code runs perfect in CodePen, the WP site in console also runs it perfect, however I simply can not get it to run on the actual WooCommerce My Account Billing Address page no matter what.

My jQuery:

jQuery(document).ready(function () {
    // Your code in here
    jQuery('#billing_test').on('change', function () {
        myFunc();
    })
    function myFunc() {
        // your function code
        var complex_name = jQuery('#billing_test').val();

        var suburb = jQuery('#billing_suburb').val();

        if (complex_name == 'mr') {
            alert('works');
            jQuery("#billing_suburb").val('LDM');
            jQuery('#billing_postcode').val('5000');
        }
    }
})

I've tried adding via Code Snippets to no luck so tried a script file with the following code:

function my_theme_scripts() {
    wp_enqueue_script( 'test', get_template_directory_uri() . '/js/test.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

But still nothing. Any and all help will be really grateful as I've attempted everything I could but still nothing.

I have also tried replacing the $ with jQuery, tried the $.noConflict() as well.

Added script manually and it is in the inspect as well.

HTML

<p class="form-row my-css" id="billing_test_field" data-priority=""><label for="billing_test" class="">Test</label><span
        class="woocommerce-input-wrapper"><select name="billing_test" id="billing_test" class="select "
            data-allow_clear="true" data-placeholder="Title">
            <option value="">Please select</option>
            <option value="mr">Mr</option>
            <option value="ms" selected='selected'>Ms</option>
        </select></span></p>

How do I not use if and else if to match the conditions:

if (complex_name == 'eldogleneast') {
   jQuery("#billing_suburb").val('ELD');
   jQuery('#billing_postcode').val('0157');
}
    else if (complex_name == 'eldoglen'){
                jQuery("#billing_suburb").val('ELD');
   jQuery('#billing_postcode').val('0157');
             }

• jquery
• forms
• wp-enqueue-script

Share Improve this question edited Nov 11, 2021 at 15:52 RawalD asked Nov 11, 2021 at 14:13 RawalDRawalD 12144 bronze badges 11

• Is the file loaded? (Check browser's network tab.) How are you testing? – kero Commented Nov 11, 2021 at 14:30
• File is coming through , can see it in inspect. Did testing through the console – RawalD Commented Nov 11, 2021 at 14:33
• 1 I imagine the #billing_test is not part of the dom when the page loads, so try delegating the change event to the first parent that's not dynamic. Worst case, you can delegate it to the document. In other words jQuery(document).on('change', '#billing_test'... – Peter Petrov Commented Nov 11, 2021 at 14:37
• @PetarPetrov Tried that still nothing ``` jQuery(document).ready(function () { jQuery(document).on('change','#billing_test', function () { myFunc(); }) ``` – RawalD Commented Nov 11, 2021 at 14:43
• Can we see some HTML markup? Only the chunk with the billing_test. But copy it from the source of the page, not the inspector. Add it to the question. – Peter Petrov Commented Nov 11, 2021 at 14:50

 |  Show 6 more comments

1 Answer 1

Sorted by: Reset to default 1

The file was reading from parent theme directory not the child theme directory thus the issue of it not being read.

Found it from tracing the directory from the Network tab

本文标签： formsjQuery will not work on page from snippet or file