私はそれらの隣に「編集」ボタンがあるレコードのセットを持っています。私はまた、内部にフォームを持っているdivを持っています。jqueryの表示と非表示の問題

「編集」をクリックするとdivが表示されます。 div内では、jquery.hide（）を介してdivを単に閉じる「閉じる」ボタンがあります。別のレコードの「編集」ボタンをクリックすると、divはまったく表示されません。

私は、他の要素のために私のコード内で他のshowとhideを使用しています。これだけ私は働くことができません。

私の場合、show（）メソッドとhide（）メソッドの具体的な使い方はありますか？

$('.edit').live('click', function() { 
     var theid = $(this).attr('id'); 

     $('#' + theid).empty().append($('.rec_edit').show()); 

     if ($('#txt_nowediting_id').val() > 0) { 
      load_single_rec($('#txt_nowediting_id').val()); 
     }; 

     $('#txt_nowediting_id').val(theid); 

     return false; 
    }); 


    $('#btnCancelEdit').click(function() { 
     $('.rec_edit').hide(); 
     load_single_rec($('#txt_nowediting_id').val()); 
     return false; 
    });

ここ.rec_editは、私はあなたのオリジナルのアイデアに近い自分自身を維持しようとした...

出典

2009-07-20 Kemal Emin

あなたが何か間違ったことをやっているように思えますが、私たちはほとんどあなたのコードを推測していないと指摘することができますエラー。「編集」ボタンの関連部分を表示することができます。 – googletorp

他にも、コードを見ずに追加できるものはほとんどありません。間違っている可能性のあるいくつかの事柄.... 1.クリックリスナーは、最初に「編集」要素にのみ適用されているため、最初にクリックリスナーがクリックされています。 2.編集が何らかの形で再生成されているため、最初のクリック後にクリックリスナーがバインドされなくなりました。 3.表示/非表示のdivは、何らかの形で変更されるため、クリックリスナーが参照しようとすると、DOM内でそれを見つけることができなくなります。いくつかのコードを投稿してください。うまくいけば、より具体的なフィードバックを得ることができます。 – tschaible

短い答え：あなたの#btnCancelEditクリックハンドラで、これを変更します。これに

$('.rec_edit').hide();

：

$('.rec_edit').hide().appendTo('body');

（それとも元々にあるどこマークアップ、そうでない場合body。）そうでなければ、empty()エディタを設定するとワイプアウトされます。ここで

（例えばload_single_rec、周りの不完全なコードを取得するコードを微調整）私の作品の完全な例です：

<html> 
    <head> 

     <script type='text/javascript' src='js/jquery-1.3.2.js'></script> 

     <script type='text/javascript'> 
      var editor; 

      $(document).ready(function() { 

       $('.edit').live('click', function() { 
        var theid = $(this).attr('id'); 

        $('#' + theid).empty().append($('.rec_edit').show()); 
    /* 
        if ($('#txt_nowediting_id').val() > 0) { 
         load_single_rec($('#txt_nowediting_id').val()); 
        }; 
    */ 
        $('#txt_nowediting_id').val(theid); 

        return false; 
       }); 


       $('#btnCancelEdit').click(function() { 
        $('.rec_edit').hide().appendTo('body'); 

        // load_single_rec($('#txt_nowediting_id').val()); 
        $('#' + $('#txt_nowediting_id').val()).text('edited!'); 
        return false; 
       }); 
      }); 
     </script> 

    </head> 
    <body> 
     <form> 

      <div id='div1' class='edit' style='border: 2px solid #00f;' > 
       Edit me 
      </div> 

      <div id='div2' class='edit' style='border: 2px solid #00f;' > 
       Edit me too 
      </div> 

      <div class='rec_edit' style='display:none; border: 2px solid #f00;'> 
       Editor 
       <input type='button' id='btnCancelEdit' value='Cancel' /> 
      </div> 

      <input type='hidden' id='txt_nowediting_id' /> 


     </form> 
    </body> 
</html>

出典

2009-07-20 22:22:15

あなたのコードを少し更新しましたが、少し上手く動作します：http://jsbin.com/uniga（http://jsbin.com/uniga/editでコードを見たり編集することができます） – Stobor

あなたは本当に追加していました空に電話した後に体に...ありがとう！ –

隠されたと示されますdiv要素です。コンテンツを編集するには、親divにクリック可能なゾーンを作成することをお勧めします。

不要な結果につながるdivを誤ってクリックしないように、「編集」テキストリンクを追加する必要があります。

問題

あなたが持っていた問題がappendそのものでした。 jQueryが処理できるようにするには、DOM上に「新しい」エンティティを作成する必要があります。また、「Cancel Edit」を修正して、編集可能なボックスを隠して元のデータを復元するために、編集可能なdiv全体をループしてキャンセルするようにしました。

既存のdivの参照を使用して1つの編集のみを許可する第2のバージョン。

全コードhere

$(document).ready(function(){ 
    var content = $('.rec_edit').html(); 
    var editing = false; 
$('.edit').click(function() { 
     if(editing == false) { 
      var theid = $(this).attr('id'); 
      var tis = "#"+theid; 
      // We hide P, because it's the original, so when we hide the "editing" div 
      // the original pops back in. 
      $(tis + " p").hide("fast"); 
      // 
      $(tis).append($('.rec_edit').show().html(content + theid)); 
      editing = true; 
     } 
    return false; 
}); 
$('#btnCancelEdit').click(function() { 
    $('.rec_edit').each(function(){ 
     if(editing == true) { 
      // We get the parent id, so we can use it to display the hidden P to 
      // restore the original. 
      var parent = "#" + $(this).parent().get(0).id + " p"; 
      $(parent).show("fast"); 
      $(this).hide(); 
      editing = false; 
      // $(this).remove(); 
     } 
     }); 

    return false; 
}); 
    });

出典

2009-07-20 12:22:42 MarioRicalde

努力をいただきありがとうございます。 divのコンテンツがかなり大きいので、毎回divを再作成するのは論理的ではありません。代わりに私はそれを隠す/表示したいと思います。 divは実際にはページの下側に「編集」リンクを持つ要素とは無関係にページの下に存在します。私の問題はhide（）を呼び出すときにdivがDOMから削除されることです。私はそれを隠すだけです。私はcss（ 'visibility'、 'hidden'）を試みましたが、運はありませんでした。私の編集内容がオンザフライで生成され、クリックイベント（コードからもわかるように）をバインドするのに.liveメソッドを使用できますか？ –

それは変です。 HideはそれをDOMから削除するものではありません。 Emin、HTMLを含め、コード全体を提供できる方があれば、誰にとっても簡単です。 – Randell

@Rendell Benavidez：私はそれをもう一度。 – MarioRicalde

jqueryの表示と非表示の問題

答えて

問題

既存のdivの参照を使用して1つの編集のみを許可する第2のバージョン。

関連する問題