JQueryを非表示にする

Question

私は更新可能なgridを作成しようとしています。マウスオーバー時にアイコンを表示することを意味します。 アイコンをクリックすると新しい行が表示され、前の行が非表示になります。私は、データの新しい行を作成し、テキストボックスで、前の行を置き換えるプロセス保存このAJAXのajax.On成功し完了を使用して値を保存したアイコン。

問題は、新しく交換したHTMLがit.Iにバインドされることはありませんよう、私はjQueryのセレクタを使用して実行マウスオーバーやその他の機能をカントということです私は呼んでいたことの回避策でした：表示し、保存するために

jQuery('[rel="datepicker"]').datepicker(); 
      jQuery('[rel="innerRows"]').mouseover(function(){ 
      //alert('hererere'); 
      var spanId = jQuery(this).attr('spanid'); 
      jQuery('[rel="innerSpans"]').hide(); 
      jQuery('#edit_'+spanId).show(); 
      }); 
      jQuery('[rel="editButton"]').click(function(){ 
      var recordId = jQuery(this).attr('id'); 
      jQuery('#show_'+recordId).hide(); 
      jQuery('#hid_'+recordId).show(); 
      }); 
      jQuery('[rel="saveRecord"]').click(function(){ 
      var recordId = jQuery(this).attr('recId'); 
      var event = jQuery.trim(jQuery('#event_'+recordId).val()); 
      var date  = jQuery.trim(jQuery('#date_'+recordId).val()); 
      var location = jQuery.trim(jQuery('#location_'+recordId).val()); 
      var notes = jQuery.trim(jQuery('#notes_'+recordId).val()); 
      if(event !='' && date !='' && location !='' && notes !=''){ 
       jQuery.ajax({ 
        url:'/application/saveevent/', 
        dataType: 'html', 
        data: '&recId='+recordId+'&event='+event+'&date='+date+'&location='+location+'&notes='+notes, 
        success : function (text){ 
        jQuery('#hid_'+recordId).replaceWith(text); 
        bind(); 
        } 
       }); 
      } 

をrow.Nowバインド関数では、上記のスクリプトをjQueryセレクターを使用して新しいHTMLに再バインドすることを再度呼びます。

問題は、このバインド機能で

jQuery('[rel="innerSpans"]').hide(); 
      jQuery('#edit_'+spanId).show(); 

doesntのことです、それはそれはそれはdoesntの生成されたHTML編集のアイコンを表示し、非表示にすることで生成されたHTML 内のボタンを表示または非表示にしません動作します。 は理由要素の置き換えHTMLまたは何かであることです。 お勧めします。

これはHTMLです。

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="eventsTableEdit"> 
           <tbody><tr class="headeventtbl"> 
           <td width="280" class="">Event</td> 
           <td width="160" class="">Date</td> 
           <td width="200">Location</td> 
           <td width="200">Notes</td> 
           </tr> 
                  <tr id="show_6" spanid="6" rel="innerRows" class="odd"> 
           <td class=""><span id="edit_6" style="display: inline;" rel="innerSpans"><a id="6" rel="editButton" href="javascript:void(0)"><img title="Click here to edit." alt="Click here to edit." src="/img/edit.png"></a></span>event of councils</td> 
           <td class="">02/08/2012</td> 
           <td>Canada</td> 
           <td class="">Call them</td> 
           </tr> 
           <tr id="hid_6" style="display:none;"> 
           <td><span id="save_6"><a recid="6" rel="saveRecord" href="javascript:void(0)"><img title="Click here to save." alt="Click here to save." src="/img/save.png"></a></span><input type="text" value="event of councils" id="event_6" name="data[event]"></td> 
           <td><input type="text" value="02/08/2012" rel="datepicker" id="date_6" name="data[date]" class="hasDatepicker"></td> 
           <td><input type="text" value="Canada" id="location_6" name="data[location]"></td> 
           <td><input type="text" value="Call them" id="notes_6" name="data[notes]"></td> 
           </tr> 
                  <tr id="show_7" spanid="7" rel="innerRows" class="odd"> 
           <td class=""><span id="edit_7" style="display: none;" rel="innerSpans"><a id="7" rel="editButton" href="javascript:void(0)"><img title="Click here to edit." alt="Click here to edit." src="/img/edit.png"></a></span>eventssssss</td> 
           <td>03/07/2012</td> 
           <td>Restaurant</td> 
           <td>Notes are here</td> 
           </tr> 
           <tr id="hid_7" style="display:none;"> 
           <td><span id="save_7"><a recid="7" rel="saveRecord" href="javascript:void(0)"><img title="Click here to save." alt="Click here to save." src="/img/save.png"></a></span><input type="text" value="eventssssss" id="event_7" name="data[event]"></td> 
           <td><input type="text" value="03/07/2012" rel="datepicker" id="date_7" name="data[date]" class="hasDatepicker"></td> 
           <td><input type="text" value="Restaurant" id="location_7" name="data[location]"></td> 
           <td><input type="text" value="Notes are here" id="notes_7" name="data[notes]"></td> 
           </tr> 

          </tbody></table> 

私はupdated.httpある新しい行に行を置き換える：//203.100.79.84：9733/

よろしく ヒマンシュー・シャーマ

Answer 1

あなたはon()代わりのmouseover()を使用してみましたか？

例えば：

jQuery('[rel="innerRows"]').on("mouseover", function(){ 

    var spanId = jQuery(this).attr('spanid'); 
    jQuery('[rel="innerSpans"]').hide(); 
    jQuery('#edit_'+spanId).show(); 
});