ラベルにjeditable、クリックしてフォーカスを失うのを防ぐにはどうすればいいですか？

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? 
}); 

基本的に "セレクタ" は私のjeditableラベルのセレクタを保持しています。私はその中の入力を見つけ、フォーカスを合わせて、ラベルのデフォルトの動作を無効にしました。これにより、ラベルがフォーカスを変更しないようにします。しかし、私はこれを元に戻す方法を知らない。私はブール値のフラグをトグルして、デフォルトを妨げる別のメソッドを呼び出すことができたと思いますが、これを行うにはもっとクリーンな方法が必要だと感じています。

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/をご覧ください。