Функция jQuery focus () вызывает .load (), чтобы вывести дважды в IE9

Question

Функция jQuery focus () вызывает .load (), чтобы вывести дважды в IE9

Смысл jQuery, похоже, заставит Internet Explorer 9 выполнить два раза. Эта проблема не возникает в старых версиях IE и не происходит в Firefox или Chrome.

У меня есть пользователь, который вводит код в поле ввода. При вводе или отправке код отправляется через нагрузку на другой скрипт (ajax). Код в поле ввода удаляется, и фокус возвращается.

Результат этого скрипта вставляется в div на той же странице.

    $(document).ready(function(){
        $('#code').keyup(function(e){
            if(e.keyCode == 13){
                console.log('Code submitted through enter');
                sendcode($('#code').val());
            }
        });

        function sendcode(b){
            console.log('function sendcode used');
            $('#Result').load('scan.php?code=' + b);
            $('#code').val('');
            $('#code').focus();
        };

        $('#Submit').click(function(){
            console.log('Code submitted through click');
            sendcode($('#code').val());
        });
    });

Однако фокус() кажется проблемой, поскольку, когда я удаляю его, проблема уходит. Я попытался разместить фокус() в любом месте кода, но безуспешно. Есть ли какая-либо альтернатива focus (), которая достигает того же или может быть как-то исправлена?

NETWORK:

URL: /scan.php?code=stackoverflow
URL: /scan.php?code=

CONSOLE: (when hit enter)
Log: Code submitted through click 
Log: function sendcode used 
Log: Code submitted through enter 
Log: function sendcode used

Вы можете видеть, что второй груз также не имеет кодовой переменной.

1

добавлено 07 Февраль 2013 в 09:11 автор Gillian Lo Wong отредактировано 07 Февраль 2013 в 09:19

Просмотры: 5

источник

Добавьте консольный журнал в функцию щелчка и посмотрите, сколько раз он запускается.

добавлено 07 Февраль 2013 в 09:15, автор Kolby, источник

@ GillianLo-Wong Thats почему i e.preventDefault() предложил в моем ответе.

добавлено 07 Февраль 2013 в 09:41, автор Jai, источник

@ GillianLo-Wong Можете ли вы предоставить рабочую демонстрацию проблемы?

добавлено 07 Февраль 2013 в 09:41, автор Anthony Grist, источник

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

добавлено 07 Февраль 2013 в 09:24, автор Gillian Lo Wong, источник

5 ответы

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Измените кнопку Submit на span или div и настройте ее.

Submit

Demo: Fiddle

Вы также можете посмотреть это answer , где добавляется атрибут type = "button" к элементу кнопки.

2

добавлено 07 Февраль 2013 в 09:32 автор Arun P Johny

источник

Привет, я использовал <button>. Но <input type = "submit"> заставил его подать дважды.

добавлено 07 Февраль 2013 в 09:37, автор Gillian Lo Wong, источник

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Система управления ссылками ReDirector 3.0

Автор: Евгений Попов

Мини-курс по Angular и NgRx

16 видео-уроков

Инструменты успешного делегирования

Автор: Евгений Попов

автор Kolby · Answer 1 · 2013-02-07T09:33Z

    function sendcode(b){
        if(b){
            console.log('function sendcode used');
            $('#Result').load('scan.php?code=' + b);
            $('#code').val('');
            $('#code').focus();
        }
    };

Что-то в этом направлении должно работать. Возможно, если b! = Undefined или что-то в этом роде. Просто убедитесь, что B есть.

автор Kolby · Answer 2 · 2013-02-07T09:33Z

    function sendcode(b){
        if(b){
            console.log('function sendcode used');
            $('#Result').load('scan.php?code=' + b);
            $('#code').val('');
            $('#code').focus();
        }
    };

Что-то в этом направлении должно работать. Возможно, если b! = Undefined или что-то в этом роде. Просто убедитесь, что B есть.

автор Jai · Answer 3 · 2013-02-07T09:17Z

Поместите функцию вне doc ready , попробуйте следующее:

function sendcode(b){
  $('#Result').load('scan.php?code=' + b);
  $('#code').val('');
  $('#code').focus();
}

$(document).ready(function(){
    $('#code').keyup(function(e){
        if(e.keyCode == 13){
            sendcode($('#code').val());
        }
    });

    $('#Submit').click(function(){
        sendcode($('#code').val());
    });
});

или попробуйте это:

.load() is one of the jquery's ajax methods so you have to stop the submissions of form otherwise page gets refreshed.

$('#Submit').click(function(e){
    e.preventDefault();
    sendcode($('#code').val());
});

автор Eevee · Answer 4 · 2013-02-09T06:20Z

Не перехватывайте нажатия клавиш, если вы действительно это не имеете в виду. Конечно, не эмулируйте кнопки с пролетами! HTML имеет теги помимо span и div по какой-либо причине.

Ваша проблема, возможно, является ошибкой IE, но это то, что вы получаете за то, что у вас есть встроенное поведение, которое отлично работает. Вам нужен только обработчик событий one , который запускается при отправке формы .

$(document).ready(function(){
    function sendcode(b){
        console.log('function sendcode used');
        $('#Result').load('scan.php?code=' + b);
        $('#code').val('');
        $('#code').focus();
    };

    $('#form').submit(function(e) {
        e.preventDefault();
        sendcode($('#code').val());

    });
});

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

$(document).ready(function(){
    $('#form').submit(function(e) {
        e.preventDefault();

        var $form = $(this);
        var data = $form.serialize();
        var action = $form.attr('action');
        $('#result').load(action + '?' + data);

        $('#code').val('').focus();
    });
});

Теперь URL-адрес живет в атрибуте action формы (где находится целевой URL формы), а JS связывает значения формы, такие как браузер, и ajax-отправьте форму для вас. Если пользователь отключен JS, форма будет отправлять обычно , и они все равно получат полезный результат, хотя и на новой странице. Код короче, проблемы с экранированием URL-адресов позаботятся о вас, и количество жестко закодированных значений меньше.