Блог

Главная - Вопросы по программированию - .toggle() иногда выполняет двойной щелчок перед началом работы

.toggle() иногда выполняет двойной щелчок перед началом работы

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть простое приложение, в котором я хотел бы переключаться между отображением и скрытием элементов в наборе полей с помощью эффекта jQuery .toggle. Проблема в том, что иногда мне приходится дважды нажимать кнопку, которая включает переключение, чтобы заставить его работать.

Есть идеи о том, что происходит?

HTML:

 <!DOCTYPE html>
<html>
<head>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="test.js"></script>
</head>
<body>
    <div class="LeftFrame">
    <div id="LeftTable"><strong>Left</div>
    </div>
    <div id="MainTable"><strong>Main
    <div>
        <br>
        <form><fieldset><legend><button id="buttonShowFields">Add Info</button></legend>
        <div id="InfoAddFields">
            ID: <input type="text"><br>
            Serial Number: <input type="text"><br>
            Location: <select id="inputLocation">
            <option>Location1</option>
            <option>Location2</option></select><br>
            Status: <select id="inputStatus">
            <option>Complete</option>
            <option>In Process</option></select><br>
        </div>
        </fieldset></form>
    </div>
    </div>
</body>
</html>

… и javascript (test.js ссылка в html выше):

 $(document).ready(function(){
// Show options to add workorder
    // $("#WOAddFields").hide();
    $("#buttonShowFields").click(function(){
    $("#InfoAddFields").toggle();
    });

});

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

1. Можете ли вы что-нибудь сказать, когда для переключения требуется двойной щелчок? Анимация все еще запущена? Это только при первой загрузке? Это после того, как вы уже переключили? Является ли первый «пропущенный» щелчок близким к предыдущему щелчку и, таким образом, регистрируется как второй щелчок предыдущего щелчка? Если вы добавите консоль. войдите в оператор click, выполните все действия в консоли. события журнала отображаются или они тоже отсутствуют?

2. Что вы делаете, чтобы предотвратить отправку формы при нажатии кнопки?

3. Кажется, у меня все работает нормально (после предотвращения отправки формы и исправления некоторого HTML). jsfiddle.net/3mtT8

4. @EliGassert: кажется, просто требуется двойной щелчок случайным образом. Иногда двойное нажатие и одиночный щелчок не работают. Добавление консоли. журнал перед переключением в нажатом блоке проверяет, что иногда одиночный щелчок вообще не регистрируется.

5. Вам не хватает закрытия </select> для вашего первого элемента select. Также вы делаете что-нибудь, чтобы остановить отправку формы?

Ответ №1:

Предотвратите отправку с помощью event.preventDefault() при нажатии кнопки

http://jsfiddle.net/3NPPP/

 $(document).ready(function(){
    $("#buttonShowFields").click(function(e){
       e.preventDefault();
       $("#InfoAddFields").toggle();
    });

});

Ответ №2:

У меня была такая же проблема при использовании обычного JavaScript для переключения элемента со следующей функцией:

 function toggle(element){
  if (element.style.display !== "none")
    element.style.display = "none";
  else element.style.display = "block";
}

Я заметил, что когда я добавил display:none в CSS элемента, который я хотел переключить, мне нужно было дважды щелкнуть, чтобы сначала отобразить элемент. Чтобы исправить это, мне пришлось явно добавить style=»display:none» в тег HTML-элемента.

Ответ №3:

вместо этого…

     <button id="buttonShowFields">Add Info</button>

используйте это…

     <input type="button" id="buttonShowFields" value="Add Info" />

Ответ №4:

Пожалуйста, измените метод события на привязку вместо щелчка.

 $("#buttonShowFields").bind('click',function(){
    $("#InfoAddFields").toggle();
});
Метки: