Fatal编程技术网
  • javascript/
  • Javascript select没有从jQuery触发任何事件

Javascript select没有从jQuery触发任何事件

javascript jquery html events select

Javascript select没有从jQuery触发任何事件,javascript,jquery,html,events,select,Javascript,Jquery,Html,Events,Select,我已经寻找了很多，现在我真的不知道该怎么办。我的问题是，我在HTML5文档中有一个select控件，如下所示： <label for="efectosId" >Elija un efecto</label> <select id="efectosId" > <option value="THRESHOLD" selected>Limite</option> <option value="GRAY">Escala de

我已经寻找了很多，现在我真的不知道该怎么办。我的问题是，我在HTML5文档中有一个select控件，如下所示：

<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>

$("#efectosId-menu").on("click",function(e){
    console.log(e.target.textContent);
});
当我在加载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>
请问，我能得到任何支持吗？？这简直让我发疯
谢谢

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

$document.readyfunction{ $efectosId.onchange，函数{ 阿尔特霍拉·蒙多； }; }; 艾莉亚·恩费克托 限制 埃斯卡拉德格里斯酒店 不透明的 逆变器 波斯特里扎 扩张器 去色模糊 去势侵蚀
尝试加载依赖于浏览器的jquery，例如，如果您不需要jquery mobile，就不要加载它，我认为它们有冲突

似乎您在jquery之前加载引导，请使用以下顺序：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="  crossorigin="anonymous"></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>
从引导文档：

插件依赖项

一些插件和CSS组件依赖于其他插件。如果你 单独包含插件，确保检查这些插件 文档中的依赖项。还要注意，所有插件都依赖于jQuery 这意味着jQuery必须包含在插件文件之前。咨询 我们的bower.json可以查看支持哪些版本的jQuery

试试看

<!DOCTYPE html>
            <html>
            <head>
                <title>dfgasdg</title>
                <script
              src="https://code.jquery.com/jquery-3.2.1.js"
              integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
              crossorigin="anonymous"></script>
            </head>
            <body>
              <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>
            <script type="text/javascript">
                $(document).ready(function(){
                $("#efectosId").on("change",function(){
                    alert("hola mundo");
                });
            });
            </script>
            </body>
            </html>
好的，解决方案是，当我使用jquery mobile、jquery ui和bootstrap的库添加select时，select控件会更改我的HTML的结构：

<div class="ui-selectmenu-menu ui-front ui-selectmenu-open" style="top: 105px; left: 769.5px;"><ul aria-hidden="false" aria-labelledby="efectosId-button" id="efectosId-menu" role="listbox" tabindex="0" class="ui-menu ui-corner-bottom ui-widget ui-widget-content" aria-activedescendant="ui-id-7" aria-disabled="false" style="width: 196px;"><li class="ui-menu-item"><div id="ui-id-2" tabindex="-1" role="option" class="ui-menu-item-wrapper">Limite</div></li><li class="ui-menu-item"><div id="ui-id-3" tabindex="-1" role="option" class="ui-menu-item-wrapper">Escala de grises</div></li><li class="ui-menu-item"><div id="ui-id-4" tabindex="-1" role="option" class="ui-menu-item-wrapper">Opacidad</div></li><li class="ui-menu-item"><div id="ui-id-5" tabindex="-1" role="option" class="ui-menu-item-wrapper">Invertir</div></li><li class="ui-menu-item"><div id="ui-id-6" tabindex="-1" role="option" class="ui-menu-item-wrapper">Posterizar</div></li><li class="ui-menu-item"><div id="ui-id-7" tabindex="-1" role="option" class="ui-menu-item-wrapper ui-state-active">Desenfoque Dilatar</div></li><li class="ui-menu-item"><div id="ui-id-8" tabindex="-1" role="option" class="ui-menu-item-wrapper">Desenfoque blur</div></li><li class="ui-menu-item"><div id="ui-id-9" tabindex="-1" role="option" class="ui-menu-item-wrapper">Desenfoque Erosionar</div></li></ul></div>
检查您的浏览器控制台..像这样尝试$document.on'change'，'efectosId'，function{alert'ssdas'；}；在所有标记中，您没有加载jQuery。您正在加载引导、jQuery mobile、jQuery UI，但没有加载jQuery。请将所有http://更改为https://当您首先添加jQuery时，您的代码工作正常。您还需要将所有脚本设置为https 
$("#efectosId-menu").on("click",function(e){
    console.log(e.target.textContent);
});