Question

我真的很喜欢jquery ui和jquery mobile的点点滴滴...移动可以很容易地为移动设备呈现我的页面，ui给了我一个非常强大的数字框微调小部件，它为我提供了一个spinchange事件，太有用了，无法忽略...

但是，当我在一个页面上同时具有一个选择菜单时，它会使选择菜单短路并阻止其完全打开。

在我发现here on stackoverflow的某些页面之后，我发现有些人遇到选择使用jquery mobile时遇到的问题，并将其包装成表格并将data-native-menu选项设置为“ false” ...

      <form action="#" method="get">
        <div data-role="fieldcontain">
          <label for="option1" class="select">Pick one:</label>
          <select id="option1" name="option1" class="optionPicker" data-mini="true" data-native-menu="false" >
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>
      </form>

但是不能解决问题。从文档中剪切jquery mobile或ui确实可以...但是，再次，我在其他地方丢失了所需的功能。

我发现我可以在加载jquery之后但在加载jquery mobile之前通过执行以下操作专门针对该项目关闭jquery mobile：

$(document).bind("mobileinit", function () {
  $.mobile.selectmenu.initSelector = ".neverGonnaLetYouClick";
});

我认为JQuery UI存在类似的东西吗？但是...我在任何地方都找不到它...

Answer 1

做了一些测试，我怀疑这是由于您的装载顺序造成的。

示例：https://jsfiddle.net/Twisty/40n27pca/16/

如果您在这里阅读：https://api.jquerymobile.com/global-config/，他们会谈论以下内容：

由于mobileinit事件被立即触发，因此您需要在加载jQuery Mobile之前绑定事件处理程序。按以下顺序链接到您的JavaScript文件：

<script src="jquery.js"></script>

<script src="custom-scripting.js"></script>

<script src="jquery-mobile.js"></script>

所以我建议以下几点：

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

如果您将其撤消，则jQuery UI将获得selectmenu的控制权。

希望有帮助。

如何防止JQuery UI控制我的选择菜单

1 个答案: