wordpress contact form 7 and custom jQuery conflicting

Question

I am using contact form 7 on wordpress and untill today I have experienced a problem. I have come to learn that it is a jQuery conflict. I find the problem only occurs in chrome works fine in firefox.

I have some custom jQuery which I placed in which can be seen below.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready( function(){
        var map = [ '11.99', '£13.99', '£14.99' ];

        jQuery('#payslips-required').change(function(){
            var o = parseInt($(this).val()) < 3 ? jQuery(this).val()-1 : 2;
            jQuery('#price').val(map[o]).addClass('hidden');
        });
    });
</script>

With the above in place the ajax does not work on contact form 7 which I require. When I remove

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

It works but the custom jQuery does not. I need both to run.

This is the error I get when I inspect it in chrome

Uncaught TypeError: Object [object Object] has no method 'on' 

Any suggestions?

Answer 1

Try removing the call to the old JQUERY file. Then move your custom lines to be below where Wordpress is calling the JQUERY file. Most likely your is running before the JQUERY js file is loaded.

Answer 2

Just add

define ('WPCF7_LOAD_JS', false );

in your config file. Please see this for further reference.