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中删除了完整性

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

似乎你在jquery之前加载bootstrap，改为使用这个命令：

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

来自bootstrap doc：

插件依赖

某些插件和CSS组件依赖于其他插件。如果你   单独包含插件，请务必检查这些插件   文档中的依赖项。 另请注意，所有插件都依赖于jQuery   （这意味着必须在插件文件之前包含jQuery）。请教   我们的bower.json可以看到支持哪些版本的jQuery。

Answer 3

尝试加载jquery依赖浏览器，就好像你不需要jquery mobile，只是不加载它，我认为它们有冲突

Answer 4

尝试

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

Answer 5

好的，解决方案是当我使用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>

所以当我从jquery调用它时，我必须这样称呼它：

$("#efectosId-menu").on("click",function(e){
    console.log(e.target.textContent);
});

select没有从jQuery

5 个答案: