Почему кнопка отправки работает только при двойном нажатии на моем примере? - PullRequest
Новая
       22

Почему кнопка отправки работает только при двойном нажатии на моем примере?

1 голос
/ 17 ноября 2011

Пожалуйста, посмотрите на эту скрипку:

http://jsfiddle.net/uNbYu/1/

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

Пожалуйста, помогите мне с тем, что заставляет этот код делать это.

Спасибо

HTML: 

<b class = "edit" id = "fooo"> FOO </b>

JS: 

$('b.edit').click(function() {
    $(this).hide().after('<form action = "foo.php" method = post><input hidden name = "field" type = "text" value = "' + this.id + '"/><input type="text" name = "period" class="editP" value="' + $(this).html() + '" /><input type = "submit" value = "Submit!!" /></form>');
    $('.editP').focus();
});
$('.editP').live('blur', function() {
    $(this).hide().prev('b.edit').html($(this).val()).show();
});

Ответы [ 3 ]

4 голосов
/ 17 ноября 2011

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

4 голосов
/ 17 ноября 2011

Это то, что говорит ваш код:

  1. При нажатии на текст создайте новый элемент ввода, кнопку отправки и форму.
  2. При размытии скрыть элемент ввода (некнопка отправки)

Таким образом, когда вы нажимаете кнопку отправки в первый раз, она фактически запускает событие размытия и скрывает ввод.

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

Эта скрипка должна сделать то, что неправильно, более очевидным.Обратите внимание, как при первоначальном предупреждении не извлекается текст FOO.Также попробуйте и нажмите кнопку Отправить.

http://jsfiddle.net/uNbYu/8/

0 голосов
/ 17 ноября 2011

1) Когда вы нажимаете на текст, ваш код создает форму и фокусируется на .editP. 

$('.editP').focus();

2) Остальная часть вашего кода говорит, чтобы скрыть .editP, когда он проигрываетfocus (blur). 

$('.editP').live('blur', function(){
    $(this).hide().prev('b.edit').html($(this).val()).show();
});

3) Таким образом, акт попытки нажать кнопку вызывает событие размытия на editP.Это скрывает .editP, таким образом, перемещаясь по кнопке, что предотвращает ее нажатие.Это происходит очень быстро ... прежде чем вы сможете успешно нажать кнопку.

...