未捕获的TypeError：$（…）.sidr不是函数[控制台Chrome开发者工具]

Question

I put this code into add basic module HTML block of a wordpress page builder. I encounter the white screen of death. Chrome developer console told me the following:

helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is not a function

This can be traced from line 15 in helpers.js?ver=4.5.3:

        $('#mobile-menu-trigger').sidr({
        source: sourceVal,
        name: 'sidr-main'
    });

Before or after I restored the previous version of the page, there was no such error. The html code below seems to run normally if save as a html file and open it with chrome. Can someone please explain which might have possibly caused that error?

Edit: When I change the theme of wordpress, everything works again. With all of other themes, the code works so the problem should come from the theme.

 $(document).ready(function() { getUpdates(); }); function getUpdates() { // get the data with a webservice call $.getJSON('http://api.thingspeak.com/channels/136053/feed/last.json?callback=?', function(data) { // if the field1 has data update the page if (data.field1) { document.querySelector('.info-giver .temperature').innerHTML = data.field1.slice(0,4) + "°C"; document.querySelector(".info-giver .humidity").innerHTML = data.field2.slice(0,5) + "%"; document.querySelector('.info-giver .windspeed').innerHTML = data.field4.slice(0,4) +" m/s"; document.querySelector(".info-giver .pressure").innerHTML = data.field3 +"Pa" ; } }); } (jQuery); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "announcer"> <div class="temperatureDeclared" style= "width: 25.00%">Temperature</div> <div class="humidityDeclared" style= "width: 25.00%">Humidity</div> <div class="windspeedDeclared" style= "width: 25.00%">Windspeed</div> <div class="pressureDeclared" style= "width: 25.00%">Pressure</div> </div> <div class = "info-giver"> <div class="temperature" style= "width: 25.00%">N/a</div> <div class="humidity" style= "width: 25.00%">N/a</div> <div class="windspeed" style= "width: 25.00%">N/a</div> <div class="pressure" style= "width: 25.00%">N/a</div> </div> 

Answer 1

You didn't include your sidr library. After loading jquery include sidr library. After that init sidr like this on your html.

$('#mobile-menu-trigger').sidr({....});

Answer 2

Add these lines before and after code your code will works

;(function($){
   //code
})(jQuery);

Just Like This

;(function($){
 $('#mobile-menu-trigger').sidr({
        source: sourceVal,
        name: 'sidr-main'
 });
})(jQuery);

I hope this will works !