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

Question

我真的很喜欢 jquery ui 和 jquery 移动设备的点点滴滴...移动设备让我可以轻松地为移动设备呈现我的页面，ui为我提供了一个非常强大的数字框微调器小部件，它为我提供了一个非常有用而无法忽略的旋转事件...

但是，当我在一个页面上有一个 select 菜单时，它会短路 ui 那个 select 菜单并阻止它完全打开。

在我找到 here on Whosebug 的一些页面之后，我看到有些人在让 select 与 jquery 移动设备一起工作时遇到问题，并且将其包装在一个表单中并设置"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 移动版或 ui 确实...但是，我又在其他地方失去了所需的功能。

我发现我可以通过在加载 jquery 之后但加载 jquery 移动设备之前执行以下操作来专门为该项目关闭 jquery 移动设备：

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

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

Answer 1

进行了一些测试，我怀疑这是由于您的加载订单造成的。

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

如果你读到这里：https://api.jquerymobile.com/global-config/他们谈论以下内容：

Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:

<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 控制我的选择菜单

How can I prevent JQuery UI from controlling my selectmenu

jquery-ui

jquery-mobile