matplotlib
diff --git a/‎examples/user_interfaces/embedding_webagg_sgskip.py‎
Lines changed: 10 additions & 2 deletions b/‎examples/user_interfaces/embedding_webagg_sgskip.py‎
Lines changed: 10 additions & 2 deletions
diff --git a/‎lib/matplotlib/backends/web_backend/all_figures.html‎
Lines changed: 22 additions & 14 deletions b/‎lib/matplotlib/backends/web_backend/all_figures.html‎
Lines changed: 22 additions & 14 deletions
diff --git a/‎lib/matplotlib/backends/web_backend/ipython_inline_figure.html‎
Lines changed: 1 addition & 1 deletion b/‎lib/matplotlib/backends/web_backend/ipython_inline_figure.html‎
Lines changed: 1 addition & 1 deletion
@@ -71,7 +71,15 @@ def create_figure():
         window.open('download.' + format, '_blank');
       };
 
-      $(document).ready(
+      function ready(fn) {
+        if (document.readyState != "loading") {
+          fn();
+        } else {
+          document.addEventListener("DOMContentLoaded", fn);
+        }
+      }
+
+      ready(
         function() {
           /* It is up to the application to provide a websocket that the figure
              will use to communicate to the server.  This websocket object can
@@ -89,7 +97,7 @@ def create_figure():
               // A function called when a file type is selected for download
               ondownload,
               // The HTML element in which to place the figure
-              $('div#figure'));
+              document.getElementById("figure"));
         }
       );
     </script>
 
@@ -10,25 +10,33 @@
     <script src="{{ prefix }}/js/mpl.js"></script>
 
     <script>
-      {% for (fig_id, fig_manager) in figures %}
-        $(document).ready(
-        function() {
-          var main_div = $('div#figures');
-          var figure_div = $('<div id="figure-div"/>')
-          main_div.append(figure_div);
+      function ready(fn) {
+        if (document.readyState != "loading") {
+          fn();
+        } else {
+          document.addEventListener("DOMContentLoaded", fn);
+        }
+      }
+
+      function figure_ready(fig_id) {
+        return function () {
+          var main_div = document.querySelector("div#figures");
+          var figure_div = document.createElement("div");
+          figure_div.id = "figure-div";
+          main_div.appendChild(figure_div);
           var websocket_type = mpl.get_websocket_type();
-          var websocket = new websocket_type(
-              "{{ ws_uri }}" + "{{ fig_id }}" + "/ws");
-          var fig = new mpl.figure(
-              "{{ fig_id }}", websocket, mpl_ondownload, figure_div);
+          var websocket = new websocket_type("{{ ws_uri }}" + fig_id + "/ws");
+          var fig = new mpl.figure(fig_id, websocket, mpl_ondownload, figure_div);
 
           fig.focus_on_mouseover = true;
 
-          $(fig.canvas).attr('tabindex', {{ fig_id }});
-          }
-        );
+          fig.canvas.setAttribute("tabindex", fig_id);
+        }
+      };
 
-	{% end %}
+      {% for (fig_id, fig_manager) in figures %}
+        ready(figure_ready({{ repr(str(fig_id)) }}));
+      {% end %}
     </script>
 
   <title>MPL | WebAgg current figures</title>
 
@@ -12,7 +12,7 @@
   function init_figure{{ fig_id }}(e) {
     $('div.output').off('resize');
 
-    var output_div = $(e.target).find('div.output_subarea');
+    var output_div = e.target.querySelector('div.output_subarea');
     var websocket_type = mpl.get_websocket_type();
     var websocket = new websocket_type(
         "ws://" + window.location.hostname + ":{{ port }}{{ prefix}}/" +