Inline-редактирование: onBlur предотвращает запуск onClick (jQuery) - PullRequest
Новая
       45

Inline-редактирование: onBlur предотвращает запуск onClick (jQuery)

1 голос
/ 26 марта 2010

Привет, сообщество StackOverflow!

В настоящее время я работаю над своим собственным плагином jQuery для встроенного редактирования, поскольку те, которые уже существуют, не соответствуют моим потребностям.

В любом случае, я бы хотел предоставить пользователю следующие (логические) параметры, касающиеся способа работы редактирования:

  • submit_button
  • reset_on_blur

Допустим, пользователь хотел бы иметь кнопку отправки (submit_button = true) и хочет, чтобы встроенный элемент ввода был удален, как только он потерял фокус (reset_on_blur = true). Это приводит к тому, что обработчик onClick регистрируется для кнопки, а обработчик onBlur регистрируется для элемента ввода.

Однако каждый раз, когда пользователь нажимает кнопку, также запускается обработчик onBlur, в результате чего режим редактирования отменяется, т. Е. До наступления события onClick. Это делает отправку невозможной.

К вашему сведению, HTML в режиме редактирования выглядит так: 

<td><input type="text" class="ie-input" value="Current value" /><div class="ie-content-backup" style="display: none;">Backup Value</div><input type="submit" class="ie-button-submit" value="Save" /></td>

Итак, можно ли как-то проверить в обработчике onBlur, был ли потерян фокус при активации кнопки отправки, чтобы режим редактирования не оставлялся до запуска события onClick кнопки отправки?

Я также пытался зарегистрировать обработчик $ ('body'). Click () для имитации размытия и отслеживания того, какой элемент был нажат, но это тоже не сработало и привело к довольно странному ошибки: 

$('html').click(function(e) { // body doesn't span over full page height, use html instead

 // Don't reset if the submit button, the input element itself or the element to be edited inline was clicked.
 if(!$(e.target).hasClass('ie-button-submit') && !$(e.target).hasClass('ie-input') && $(e.target).get(0) != element.get(0)) {  
  cancel(element);
 }
});

jEditable использует следующий фрагмент кода. Мне не нравится такой подход из-за задержки. Не говоря уже о том, что это работает. ;) 

input.blur(function(e) {
 /* prevent canceling if submit was clicked */
 t = setTimeout(function() {
  reset.apply(form, [settings, self]);
 }, 500);
});

Заранее спасибо!

Ответы [ 2 ]

3 голосов
/ 26 марта 2010

Привязать отправку к событию mousedown / keydown вместо click; они оба стреляют ДО blur. Затем вы можете отменить или аннулировать событие размытия, если это необходимо, используя unbind или проверку класса и т. Д.

Редактировать: К сожалению, это не сработает, если вы перейдете на кнопку, так что, возможно, это не идеальный способ ...

0 голосов
/ 19 июня 2015

Если вы хотите, чтобы onblur и onclick запускались, используйте вместо кнопки onfocus вместо onClick Это сначала вызовет событие onblur, а затем onFocus. Скопируйте код из OnClick в событие OnFocus, и он будет отлично работать. 

                    $(document).off('focus', '#Button1');
                    $(document).on('focus', '#Button1', function (e) {

                        // ur work.
                        }

                    });
...