javascript - select 没有从 jQuery 触发任何事件

Question

我找了很多，现在我真的不知道该怎么做。我的问题是我在 HTML5 文档中有一个选择控件，如下所示:

<label for="efectosId" >Elija un efecto</label>
<select id="efectosId" >
  <option value="THRESHOLD" selected>Limite</option>
  <option value="GRAY">Escala de grises</option>
  <option value="OPAQUE">Opacidad</option>
  <option value="INVERT">Invertir</option>
  <option value="POSTERIZE">Posterizar</option>
  <option value="DILATE">Desenfoque Dilatar</option>
  <option value="BLUR">Desenfoque blur</option>
  <option value="ERODE">Desenfoque Erosionar</option>
</select>

此外，在 JavaScript 文件中我有以下代码:

$(document).ready(function(){
    $("#efectosId").on("change",function(){
        alert("hola mundo");
    });
});

当我在加载 jQuery 库的单个文档中尝试代码时，一切正常，但是当我需要在我按顺序加载 jQuery 库、jQuery 移动库和 jQuery ui 库的文档中使用它时，然后它不起作用:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="./bgrins-spectrum-98454b5/spectrum.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="  crossorigin="anonymous"></script>

拜托，我可以得到任何支持吗？这让我发疯 谢谢!

Answer 1

我重新排序了脚本标签并从 jquery.min.js 中删除了完整性

$(document).ready(function(){
    $("#efectosId").on("change",function(){
        alert("hola mundo");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="./bgrins-spectrum-98454b5/spectrum.js"></script>

<label for="efectosId" >Elija un efecto</label>
                <select id="efectosId" >
                    <option value="THRESHOLD" selected>Limite</option>
                    <option value="GRAY">Escala de grises</option>
                    <option value="OPAQUE">Opacidad</option>
                    <option value="INVERT">Invertir</option>
                    <option value="POSTERIZE">Posterizar</option>
                    <option value="DILATE">Desenfoque Dilatar</option>
                    <option value="BLUR">Desenfoque blur</option>
                    <option value="ERODE">Desenfoque Erosionar</option>
                </select>