JavaScript file not loading before dom

Question

I'm trying to get slick carousel to work on my Joomla 3.4. I did this on a test page without having Joomla and it worked fine! I tried everything! the problem seems like the script is loading before the dom or before a certain thing appears. So the slick.js is not getting excuted. Also, there's nothing wrong with the html or slick code already tested on another site.

chrome console show Cannot read property 'slick' of null The JavaScript is very simple it's called slickme.js and uses slick.min.js

 $('.slidequiz').slick({
       dots: false,
    accessibility: false,
    infinite: false,
    draggable:false,
    speed: 500,
    mobileFirst: true,

    slidesToShow: 1,
    slidesToScroll: 1
  });

Thing I already tried:

1. using $(window).load(function(){...});

2. using $(window).bind("load", function() {....}); Or $( document ).ready(function() {...}); chrome console throws an error $(...).ready is not a function

3. using $(function() {..} nothing seems to happen and no console errors but the slick carousel didn't work and the dom didn't get modified by the js.

4. Tried changing the script to inline script inside the article

5. Tried changing the place of the script loading to the head and then body. I'm using a template and did that through the template section it lets me add custom scripts.

Currently the JS Script is in a separate file called slickme.js that loads with the slick.min.js library at the end of the body tag. My Joomla website

Any help is really appreciated. Thank you!

Answer 1

I just found a solution. I used

jQuery( document ).ready(function( $ ) { // Code goes here });

I think jQuery.noConflict(); was being fired in another script.