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

显示并保存row.Now在bind函数中我再次调用上面的脚本用jQuery选择器重新绑定新的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 /

此致 Himanshu Sharma

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

JQuery隐藏和显示不起作用

1 个答案: