Как я могу запретить JQuery UI управлять моим выбором?

Question

Мне действительно нравятся кусочки как jquery ui, так и jquery mobile ... mobile упрощает рендеринг моей страницы для мобильных устройств, ui дает мне действительно мощный виджет счетчика для числовых ящиков, который дает мне событие spinchange, котороеслишком полезно, чтобы игнорировать ...

Но, когда у меня есть меню выбора на странице с обоими, оно закорачивает это меню выбора и не позволяет ему полностью открыться.

после некоторых страниц Iобнаружил здесь в stackoverflow , я видел, что у некоторых людей возникают проблемы с выбором select для работы с 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 mobile только для этого элемента, выполнив следующие действия после загрузкиjquery, но прежде чем загружать 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 получает контроль над selectmenu.

Надеюсь, это поможет.