jquery - 标签上可编辑，如何防止它在点击时失去焦点？

Question

我正在构建一个简单的脚本，允许用户动态添加电话号码。这些输入与标签配对，都可以即时编辑。我使用 jeditable 作为标签，但后来遇到了一个小问题，如果用户尝试在标签的输入框中单击，浏览器将检测到对标签的单击并将焦点放在输入元素上标签的“for”属性。

我尝试了以下方法:

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

本质上，“选择器”保存了我的可编辑标签的选择器。我找到了其中的输入，并且在焦点上我禁用了标签的默认行为。这可以防止标签改变焦点。但是，我不知道如何撤消此操作。我想我可以切换一个 bool 标志，然后调用单独的方法来阻止默认设置，但我有一种感觉，必须有一个更简洁的方法来做到这一点，有什么建议吗？

Answer 1

另一种方法是在编辑标签时删除 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/ .