在事件处理程序中找不到jquery函数

Question

这让我发疯了。如果你查看注释，滑块是可访问的并在document.ready事件内部工作。

但是，完全相同的代码行在切换中不起作用

这只是一个例子，但是我无法在任何事件中操纵滑块......最近怎么回事？

https://jsfiddle.net/w3zv5t0s/11/

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#tv").load("tv.php");
  //WORKS HERE
  $("#dimmer-3").val(10).slider("refresh");
  $('.toggle').on("slidestop", function() {
    //NOT HERE
    $("#dimmer-3").val(1).slider("refresh");
  });
});

＆＃13;

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>


<select class='toggle' id='3' data-role='slider' data-itemID='3'>
  <option value='ON'>On</option>
  <option value='OFF' selected='selected'>Off</option>
</select>

<input class='dimmerSlider' id="dimmer-3" type='range' value='15' min='0' max='15' step='1' data-highlight='true' data-itemID='sl3' />

<div data-role="collapsible" data-collapsed="true">
  <h3>TV LED</h3>
  <div id="tv"></div>
</div>

＆＃13;

＆＃13;

＆＃13;