Issue with jQuery conflict

Question

I want to use click function in Wordpress single.php

for that, I have used below code

<div class="wrapper clearfix">
  <a href="#" id="mobile-menu-toggle" class="lines-button">
    <span class="lines"></span>
   </a>
</div>

$(document).ready(function(){
  $('.clearfix a').click(function(){
    alert();

  });
});

and when I use this code I have received the error Uncaught TypeError: $(...).MagicLiquidizerTable is not a function

I have searched for this error and I have got this and this code.

and as this question, I have tried

jQuerydocument).ready(function($){
  $('.clearfix a').click(function(){
    alert();

  });
});

and with

$.noConflict();

jQuery(function ($) {
  console.log($); 
});

console.log($);

I have tried that both but it is still not working and got again this error Uncaught TypeError: $(...).MagicLiquidizerTable is not a function.

can anybody help me with this

It seems you have a conflict with MagicLiquidizerTable plugin. Your first code looks correct. To you have a link to page with this error? — Vkuter, Jan 22 '20 at 08:18

Icewine · Answer 1 · 2020-01-22T05:02:18.043

0

Not sure how you have set up the html but if the class clearfix is a div surrounding the href then it should work.

If you are putting the class clearfix in the href like <a href="#" class='clearfix'>TEST</a> then it will not work or use a class name like clearfix1 and test if it works or not.

EDIT: I have used your code above an this causes no errors. There must be something on the rest of your page that is conflicting with this that we can not see in your code. It is probably a class name. I would change the class name and test to see if it is a class name conflict first.

$(document).ready(function(){
  $('.clearfix a').click(function(){
    alert("this works");

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="wrapper clearfix">
  <a href="#" id="mobile-menu-toggle" class="lines-button">
    <span class="lines">test</span>
   </a>
</div>

edited Jan 22 '20 at 05:02

answered Jan 22 '20 at 04:44

Icewine

1,851
1
12
22

yes you are right clearfix is a Div class and is within a clearfix class and that's why I am using `$('.clearfix a')` – Jan 22 '20 at 04:49
I have updated my HTML code, please check and there are so many in clearfix class thats why I am using `$('.clearfix a').click()` – Jan 22 '20 at 04:54
Edited above. Nothing wrong with your code. Just a conflict somewhere on the rest of your page that is not in your op comment. – Icewine Jan 22 '20 at 05:03

Rahat Hameed · Accepted Answer · 2020-03-03T15:18:06.263

WordPress comes with its own jQuery version, You can enqueue it using below function. It will be added by its own if you mentioned jquery as dependency while enqueue another JS file.

wp_enqueue_script("jquery");

Many plugins used in wordpress use jQuery instead of $ to be on safe end. If you want to use $ instead of jQuery please add below code at top of jQuery file or script.

var $ = jQuery.noConflict();

You can also use $ inside your read statement as well as shown below.

    jQuery(document).ready(function ($) {
        //Your JS Code
     });

Issue with jQuery conflict

2 Answers2