javascript - wordpress contact form 7 and custom jQuery conflicting - Stack Overflow

admin管理员组

文章数量:1335106

I am using contact form 7 on wordpress and untill today I have experienced a problem. I have e 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=".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=".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?

I am using contact form 7 on wordpress and untill today I have experienced a problem. I have e 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./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./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?

• javascript
• jquery
• ajax
• wordpress
• contact-form-7

Share Improve this question Follow asked Aug 28, 2013 at 19:20 addy88addy88 8311 gold badge55 silver badges1212 bronze badges 6

• 1 There's nothing in the code posted that would require a three year old jQuery version to make it run ? – adeneo Commented Aug 28, 2013 at 19:25
• if that was the case why does it not work when I remove it? – addy88 Commented Aug 28, 2013 at 19:29
• How should I know, it works perfectly fine for me in all versions of jQuery -> jsfiddle/3wsHA ... so that's not the issue. – adeneo Commented Aug 28, 2013 at 19:37
• I've done the same and still have the same issue their is still a conflict which is causing contact form 7 to loose its ajax function. Is it possible that because their are two jquery being called its causing one to override the other? – addy88 Commented Aug 28, 2013 at 19:42
• Of course, you shouldn't load two versions of jQuery, and that's why I noted that the code posted above should work in all versions of jQuery, and you should be using the newest version. In fact, in wordpress you should never include jQuery by hardcoding it in, you should use enqueue script() to handle that for you. – adeneo Commented Aug 28, 2013 at 19:48

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

Just add

define ('WPCF7_LOAD_JS', false );

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

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.

本文标签： javascriptwordpress contact form 7 and custom jQuery conflictingStack Overflow