JQuery隐藏和显示不起作用

Question

我一直在尝试制作一个可更新的网格。这意味着我在鼠标悬停时显示一个图标 单击该图标时，我会显示一个带有文本框的新行并隐藏上一行，然后有一个使用 ajax 保存值的图标。成功完成此 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();
                  } 
              });
            }

显示和保存行。现在在绑定函数中，我再次调用上面的脚本来重新绑定带有 jQ​​uery 选择器的新 html。

问题是在这个绑定函数中

 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>

我用更新的新行替换该行。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();
 });