jQuery change function not logging to console

Question

The change function is not firing to the console after I change the value in the dropdown. When I apply the code in the console and run it, changed!! logs without any problem. What could be the cause of this?

jQuery( document ).ready(function() {

    /* Watch for changes in UITVERKOCHT for 50m and 100m pages and change the text */

    if(window.location.href.indexOf("prikkabel-50-meter") > -1 || window.location.href.indexOf("prikkabel-100-meter") > -1){
        console.log('window location true');
        jQuery('#aantal-fittingen').change(function(){
            console.log('changed!!');
            if(jQuery('.woocommerce-variation-availability > p').text() === "Uitverkocht"){
                jQuery('.woocommerce-variation-availability > p').text('Beschikbaar');
            }
        });
    }
});

This is the page when I would like this code to work: https://pkled.wpstagecoach.com/product/prikkabel-50-meter/

Does your console show this `console.log('window location true');`? Is code getting executed till here? — Milan Chheda, May 25 '17 at 14:02
well if the `'#aantal-fittingen'` element added dynamically to the page? My bet is you are trying to attach the event before the element is rendered. — epascarello, May 25 '17 at 14:06
The '#aantal-fittingen' element is actually there when DOM is ready. It should fire. It's the (.woocommerce-variation-availability > p).text element that changed when dropdown value is changed. — Marco V, May 25 '17 at 14:07
Does event delegation make a difference? `jQuery(document).on('change', '#aantal-fittingen', function() {} )` — epascarello, May 25 '17 at 14:14
*Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and **the shortest code necessary to reproduce it in the question itself**.* — freedomn-m, May 25 '17 at 14:20

score 0 · Answer 1 · answered May 25 '17 at 14:23

This solved my problem:

if(window.location.href.indexOf("prikkabel-50-meter") > -1 || window.location.href.indexOf("prikkabel-100-meter") > -1){
    jQuery(document).on('change', '#aantal-fittingen', function() {
        if(jQuery('.woocommerce-variation-availability > p').text() === "Uitverkocht"){
            jQuery('.woocommerce-variation-availability > p').text('Preferred text');
        }
    });
}

Thanks to @epascarello

jQuery change function not logging to console

1 Answers1