JQuery隱藏並顯示不工作

Question

我一直在嘗試使可更新的網格。這意味着我在鼠標懸停上顯示一個圖標 單擊該圖標我顯示一個新的行與文本框並隱藏前一行然後有一個使用ajax.On保存值的圖標。成功完成此ajax保存過程後，我創建了一行新數據，並用文本框替換了前一行。

問題是，我不能運行使用jQuery選擇鼠標懸停等功能爲新更換的HTML將不會被綁定到它。我做了一個解決方法我打電話：

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

顯示和保存現在在綁定函數中，我再次調用上面的腳本來重新綁定新的HTML與jQuery選擇器。

問題是，在這個綁定功能

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

不起作用它不顯示或隱藏生成的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/

問候 人士Himanshu夏爾馬

Answer 1

您是否嘗試過使用on()，而不是mouseover()？

E.g：

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

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