Функция загрузки jquery не работает внутри функции нажатия клавиш

Question

Функция загрузки jquery не работает внутри функции нажатия клавиш

0

Я столкнулся с проблемой. У меня есть этот простой html-код.

<form name="myform" method="POST" action="">
    <div>
        <p>
            <input id="query" type="text" size ="60" title="Enter your search string here." style="font-size:12px;" />
            <input id="startSearch" type="button" value="Search Resource" />
         </p>
    </div>

    <div id="pageContents" >

    </div>
</form>

и я использую этот код JQuery для запуска моей программы

$(document).ready(function() {

    $('#query').keypress(function(e) {
        if (e.keyCode == '13') {
            alert( 'enter key is pressed ');
            $('#startSearch').click();
        }
    });

    $('#startSearch').click(function() {
        query = $('#query').val();
        model = $('input:radio[name="model"]:checked').val();
        if(model=='combined'){
            $('#pageContents').load('combinedsearch.jsp?q='+encodeURIComponent(query)+'&m='+model);
        } else {
            $('#pageContents').load('search.jsp?q='+encodeURIComponent(query)+'&m='+model);
        }

    });
});

проблема: $('#startSearch').click(function() работает хорошо, когда кто-то нажимает кнопку поиска, но $('#query').keypress(function(e)) фиксирует событие и обрабатывает мой код, но никогда не показывает результаты возвращаются в браузер. Я думаю, что функция загрузки не работает внутри $('#query').keypress(function(e)).

user3583361 29 апр. 2014, в 03:29

Источник

0

Если вы поместили alert() в обработчик click , он отображается?
Barmar 29 апр. 2014, в 00:51
0

да, это предупреждает сообщение. На самом деле он обрабатывает страницу комбинированного поиска.jsp, но никогда не загружает его обратно в раздел содержимого страницы.
user3583361 29 апр. 2014, в 01:10

Теги:

javascript

jquery

4 ответа

Ещё вопросы

Если вы поместили alert() в обработчик click , он отображается?
да, это предупреждает сообщение. На самом деле он обрабатывает страницу комбинированного поиска.jsp, но никогда не загружает его обратно в раздел содержимого страницы.

christian314159 · Answer 1 · 2014-04-29T01-42-00.000Z

Вы слишком много делаете;) Это форма, и ее "главное событие" - это submit которое происходит, когда кто-то нажимает "вводить" или нажимает кнопку отправки. Таким образом, ваш HTML должен выглядеть так:

<form id="myform">
  <input id="query">
  <input type="submit" value="Search Resource" />
</form>

и ваш JS:

$(function(){

  // DOM ready

  $('#myform').on('submit', function(e){

    e.preventDefault();

    // Your search code
    // ...

  });

});

Да, это правильный способ его использования. Я голосую за это. Просто прочитайте jQuery Submti . Спасибо

Barmar · Answer 2 · 2014-04-28T22-37-00.000Z

Вам необходимо предотвратить действие по умолчанию отправки формы при нажатии Enter.

$('#query').keypress(function(e) {
    if (e.keyCode == '13') {
        e.preventDefault();
        alert( 'enter key is pressed ');
        $('#startSearch').click();
    }
});

Papa · Answer 3 · 2014-04-28T22-48-00.000Z

Я бы не использовал keypress. Используйте keydown или keyup.

Как указано в jquery api:

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

Благодарю. Но я пробовал и keydown и keyup. Даже с этими двумя это не работает.

sahbeewah · Answer 4 · 2014-04-28T22-40-00.000Z

По моей скрипке это работает так, как ожидалось: http://jsfiddle.net/65HSm/

HTML:

<div id="pageContents"></div>
<input type="text" id="query">
<input type="button" id="startSearch" value="search">

JS:

$(document).ready(function () {
    $('#query').keypress(function (e) {
        if (e.keyCode == '13') {
            alert('enter key is pressed ');
            $('#startSearch').click();
        }
    });

    $('#startSearch').click(function () {
        query = $('#query').val();
        model = $('input:radio[name="model"]:checked').val();
        if (model == 'combined') {
            console.log('load 1');
            console.log(query);
            $('#pageContents').load('combinedsearch.jsp?q=' + encodeURIComponent(query) + '&m=' + model);
        } else {
            console.log('load 2');
            console.log(query);
            $('#pageContents').load('search.jsp?q=' + encodeURIComponent(query) + '&m=' + model);
        }

    });
});

да, он фиксирует событие keydown / keypress / keyup и функцию нажатия триггера для элемента startSearch. Мой код обрабатывается, но результаты никогда не загружаются в #pageContents div