Функция 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
Добавьте консольный журнал в функцию щелчка и посмотрите, сколько раз он запускается.
добавлено автор Kolby, источник
@ GillianLo-Wong Thats почему i e.preventDefault() предложил в моем ответе.
добавлено автор Jai, источник
@ GillianLo-Wong Можете ли вы предоставить рабочую демонстрацию проблемы?
добавлено автор Anthony Grist, источник
Спасибо за предложение. Я добавил журналы консоли и журнал. Похоже, что он отправляется через клик сначала и вводит второй.
добавлено автор Gillian Lo Wong, источник

5 ответы

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

Submit

Demo: Fiddle

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

2
добавлено
Привет, я использовал <button>. Но <input type = "submit"> заставил его подать дважды.
добавлено автор Gillian Lo Wong, источник
    function sendcode(b){
        if(b){
            console.log('function sendcode used');
            $('#Result').load('scan.php?code=' + b);
            $('#code').val('');
            $('#code').focus();
        }
    };

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

2
добавлено
Отличное и простое решение «отфильтровать» «плохие запросы». Ура!
добавлено автор Gillian Lo Wong, источник
    function sendcode(b){
        if(b){
            console.log('function sendcode used');
            $('#Result').load('scan.php?code=' + b);
            $('#code').val('');
            $('#code').focus();
        }
    };

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

2
добавлено
Отличное и простое решение «отфильтровать» «плохие запросы». Ура!
добавлено автор Gillian Lo Wong, источник

Поместите функцию вне 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());
});
1
добавлено
Я немного обновил ответ.
добавлено автор Jai, источник
Просто потому, что он имеет id для Submit, это не означает, что это настоящая кнопка отправки, или вообще есть форма.
добавлено автор Anthony Grist, источник
Спасибо за усилия Jai, но, к сожалению, ваше предложение не работает. Кроме того, нет никакой формы (извините за неправильное представление)
добавлено автор Gillian Lo Wong, источник

Не перехватывайте нажатия клавиш, если вы действительно это не имеете в виду. Конечно, не эмулируйте кнопки с пролетами! 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-адресов позаботятся о вас, и количество жестко закодированных значений меньше.

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda