0

jqueryを使用してインライン編集をしようとしています。私が抱えている問題は、入力テキストを作成するときにテキストを変更できないことです。私は焦点を当てることさえできないようです。読み取り専用または無効になっているようです。$( ".sr-label" ).live("click" は、テキスト フィールドをクリックしようとすると、まだ呼び出されています。何らかのバインド解除などを行う必要がありますか?

助けてくれてありがとう 

<ul>
  <li><span class='sr-label'>label 1</span></li>
  <li><span class='sr-label'>label 2</span></li>
</ul>

私のjsは次のようになります

$( ".sr-label" ).live("click", function(event){    
     console.log("sr-label");
     var $item = $( this ),
     $target = $( event.target );
     var $pitem = $item.parent();
     newHTML  = '<input id="label_'+$pitem.attr('id')+'" type="text" size="30" '+
                 ' value="'+$item.text()+'"><input class="saveedit" '+
                 ' id="save_'+$pitem.attr('id')+'" type="button" value="save">'+
                 ' <input id="canedit" type="button" value="cancel">';
     $item.html(newHTML);
     return false;
 });

jsFiddle の例

4

2 に答える 2

1

私のフィドルこれで仕事は終わりです。

$handler = function(e) {
    $.tempNamespace = { oldText : $(this).text() }
    $item = $(this);
    $parent = $item.parent();
    $('.sr-label').unbind('click');
    $newHTML = "<input id='textEdit' type='text' value='" + $item.text() + "'><button id='saveEdit'>Save</button><button id='cancelEdit'>Cancel</button>";  
    $item.html($newHTML);
};

$('.sr-label').click($handler);


$('li').on('click','#saveEdit',function(){
    $newText = $(this).prev().val();
    $(this).parent().html($newText);    
    $('.sr-label').click($handler);
});

$('li').on('click','#cancelEdit',function(){
    console.log();
    $(this).parent().html("<span class='sr-label'>" + $.tempNamespace.oldText + "</span>");    
    $('.sr-label').click($handler);
});
于 2012-11-07T04:21:05.073 に答える
0

スパン内の要素のクリック イベントがスパンまで伝播し、ハンドラーが再度実行されます。また、ハンドラーは、実行されるたびにスパンの内容全体を置き換えます。したがって、入力が読み取り専用または無効になっているのではなく、クリックすると削除され、再作成されます。

キーを押してもクリックハンドラーがトリガーされないため、キーボードで入力にタブ移動すると、入力できることがわかります。

「なんらかのバインド解除などを行う必要がありますか?」

.live()そのクラスの特定の要素に適用され、他の要素には適用されないようにバインドを解除することはできません。個々のハンドラーを.click()、.bind()または委任されていない形式で.on()バインドした場合は、それらを 1 つずつバインド解除できます。

代わりにできることは、セレクターを変更して、子入力要素を持たない要素にのみ適用されるようにすることです。

$(".sr-label:not(:has(input))").live("click", function(event){

デモ: http://jsfiddle.net/H2ncm/2/

ただし、これは推奨されていないことに注意してください.live()(何らかの理由で本当に古いバージョンの jQuery を使用している場合を除きます)、.on()メソッドの委譲バージョンに切り替える必要があります。

$(document).on("click", ".sr-label:not(:has(input))", function(event){

クリックがdocument発生すると、jQuery はそれが 2 番目のパラメーターのセレクターに一致する要素上にあるかどうかをテストし、一致する場合は関数を呼び出します (それ以外の場合は何もしません)。理想的には を使用しないことに注意してdocumentください。たとえば、包含要素など、問題の要素に非常に近い要素を使用しますul。

デモ: http://jsfiddle.net/H2ncm/1/

これは、クリックされたスパンに既に入力が含まれている場合に何もしない単純なテストをハンドラー内に追加するのと同じです。

if ($item.find("input").length)
   return;

デモ: http://jsfiddle.net/H2ncm/

于 2012-11-07T03:46:41.727 に答える