jQuery: как вернуть события мыши после отмены привязки? - PullRequest
Новая
       18

jQuery: как вернуть события мыши после отмены привязки?

1 голос
/ 21 января 2012

Мне нужно показать ввод текста, когда мышь входит в элемент TD, и скрывать, когда он уходит. Итак, когда мы нажимаем на этот ввод (фокус), он связывает события мыши ....... что я должен написать, чтобы связать стандартные действия с mouseenter и mouseleave, когда мы нажимаем Enter на входе? 

$(".translation").mouseenter(function(){
            $(this).html('<input type="text" class="tr_input" placeholder="Перевести...">');


            $(".tr_input").focus(function(){
                $(".translation").unbind("mouseenter");
                $(".translation").unbind("mouseleave");
            });

        });

        $(".translation").mouseleave(function(){
            $(this).html("");
        });

1 Ответ

0 голосов
/ 21 января 2012

Вместо того, чтобы воссоздавать ввод каждый раз, я думаю, что вы можете создать его один раз (возможно, прямо в своем HTML), но с display:none. Когда мышь входит в ваш td, скройте все, что там есть, и покажите ваш ввод.

Затем, когда мышь покидает ваш ввод, вы снова скрываете его и показываете, что было раньше (если вообще что-то). Таким образом, вам не нужно связывать и развязывать элементы на лету.

Обновление : Мне кажется, я неправильно понял ваш вопрос. Возможно, кто-то еще знает, как правильно связывать и отвязывать обработчики событий (я не знаю), но, возможно, я могу помочь вам решить вашу проблему. Если я правильно понял, вы пытаетесь сделать что-то похожее на редактирование содержимого таблицы, верно? (как электронная таблица)

Итак, мое предложение выше по-прежнему применимо, однако вы хотите запретить запуск этих обработчиков после того, как пользователь нажал на ввод. Поскольку только один элемент будет иметь фокус за раз, вы можете создать переменную lock и установить для нее значение true, пока пользователь ее редактирует: 

var lock = false;
$("input").click(function() { lock = true; });

И проверьте его перед запуском каждого из ваших обработчиков: 

$(".translation").mouseenter(function(){
    if ( lock )
        return;

Когда пользователь нажимает ввод (или ввод теряет фокус), вы можете снова установить lock = false и запустить тот же код, что и для mouseleave (поскольку мышь, возможно, уже ушла, когда пользователь редактировал).

Полный рабочий пример на jsFiddle . Надеюсь, это поможет!

...