Question

I seem to be having problems with this and I cannot seem to figure out which component is causing it even after lot’s of testing.

So what I did was use the

jQuery.noConflict();  
jQuery(document).ready(function() {  
   jQuery("a").click(function() {  
     alert("Hello world!");  
   });  
 });  

I also replaced all $ with ‘jQuery”.
However while the “$ is not a function” errors disappeared, a lot of the code still doesn’t work.

Here is one working example that doesn’t work on the site:
http://jsfiddle.net/pufamuf/Q3YpU/3/

When you look at my site, the ‘active’ portion doesn’t seem to work even though it’s the same code

Link to Js file:
Link

And finally, this whole portion of the code doesn’t work:

jQuery('.scroll-pane').jScrollPane();
jQuery("#myTable").tablesorter({  
    headers: {  
        0: { 
            sorter: false 
        }, 
        8: { 
            sorter: false 
        } 
    },
        widgets: ['zebra']


}); 

While it’s not throwing out any errors, the custom scrollbar doesn’t work and neither does the table-sorter plugin.

Does anyone know how I can fix this? Thanks! 🙂

Answer 1

Your plugins arent working because they themselves also use the $. So a conflict exists and they don’t execute. You can either replace those with jQuery or, inside the plugin file, add jQuery.noConflict();

Whenever jQuery code is called it needs to execute the noConflict() function. You can not store this function in a variable like: $js. Try using js instead.