Блог

Главная - Вопросы по программированию - jQuery Datepicker имеет более низкий приоритет, чем другие элементы управления в форме

jQuery Datepicker имеет более низкий приоритет, чем другие элементы управления в форме

#javascript #jquery #html #jquery-mobile #cordova

#javascript #jquery #HTML #jquery-мобильный #кордова

Вопрос:

Если вы посмотрите на скриншот выше, календарь плавает над кнопкой отправки. Однако, когда я пытаюсь щелкнуть любой из дней в верхней строке, он регистрирует кнопку отправки как нажатую.

Вот HTML:

         <div data-role="content">
            <div class="ui-content">
                <form method="POST" onsubmit="return submitForm()" id="myForm" data-ajax="false">
                    <input type="text" name="transaction_date" class="date-input" data-inline="false" data-role="date" readonly="true">
                    <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" align="center">
                        <input type="radio" name="transaction_type" id="radio-choice-1" value=0>
                        <label for="radio-choice-1">Expense</label>
                        <input type="radio" name="transaction_type" id="radio-choice-2" value=1>
                        <label for="radio-choice-2">Income</label>
                    </fieldset>
                    <input type="submit" value="Submit">
                </form>
            </div>
        </div>

Как я могу это исправить, чтобы все, что я нажимаю в календаре, имело приоритет?

Комментарии:

1. Не удается воспроизвести Есть ли в вашем css какие-либо правила z-index?

2. Я использовал эту оболочку, которую написал кто-то другой: github.com/arschmitz/jquery-mobile-datepicker-wrapper

3. Я проверил файлы css, не было никаких правил z-index

4. @JTG получил его для репликации jsfiddle.net/24KCx/6 Похоже, что причиной проблемы является jQuery mobile.

Ответ №1:

Согласно CSS jQuery mobile, ui-btn input, ui-btn button при появлении имеет a z-index:2 и ui-datepicker-div имеет a z-index:1 , что вызывает вашу проблему.

Настройка с помощью z-индекса кнопки отправки исправила это для меня.

jsFiddle

В качестве альтернативы, вы могли бы настроить ui-datepicker-div z-index так, чтобы он был немного выше, но поскольку его вызов абстрагируется от вас, вам придется покопаться в ядре пользовательского интерфейса, чтобы выяснить, где производится настройка.