Блог

Я создаю простой скрипт, который позволяет пользователю динамически добавлять телефонные номера. Это входные данные в паре с метками, которые все можно редактировать на лету. Я использую jeditable для ярлыков, но затем я столкнулся с небольшой проблемой, если пользователь попытается щелкнуть внутри поля ввода ярлыка, браузер обнаружит щелчок по ярлыку и переместит фокус на элемент ввода атрибута метки «for».

Я попробовал следующее:

 $(selector).find('input').live('focus', function(){
    $(selector).click(function(e){
        e.preventDefault;
        return false;
    });
}).live('blur', function(){
    //somehow reattach the behaviour here?
});
  

По сути, «селектор» содержит селектор для моей настраиваемой метки. Я нахожу входные данные внутри него, и при фокусировке я отключил поведение ярлыка по умолчанию. Это предотвращает изменение фокуса на ярлыке. Однако я не знаю, как это отменить. Я предполагал, что могу переключить логический флаг, а затем вызвать отдельный метод, который предотвратил бы использование по умолчанию, но у меня такое чувство, что должен быть гораздо более чистый способ сделать это, есть предложения?

Альтернативой является удаление for атрибута при редактировании ярлыка, а затем добавление этого атрибута обратно после редактирования.

 // store the "for" attr in the element's data
$('label').each(function() {
    $(this).data('for', $(this).attr('for'));
});

$('label').editable('...', {
    ...
    onreset: function() {
        var $label = $(this).parent();
        $label.attr('for', $label.data('for'));
    }
}).click(function() {
    $(this).removeAttr('for');
});
  

Посмотрите на это в действии:http://jsfiddle.net/G8QuA /.