JQuery скрыть и показать не работает - PullRequest
Новая
       20

JQuery скрыть и показать не работает

1 голос
/ 21 февраля 2012

Я пытался создать обновляемую сетку. Что означает, что я показываю значок при наведении мыши по щелчку этого значка я показываю новую строку с текстовыми полями и скрываю предыдущую строку, затем появляется значок, который сохраняет значения с помощью 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();
                  } 
              });
            }

, чтобы показать и сохранить строку. Теперь в функции связывания я снова вызываю вышеуказанный скрипт для повторного связывания нового 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>

Я заменяю строку новой строкой, которая обновляется. http://203.100.79.84:9733/

С уважением Химаншу Шарма

1 Ответ

1 голос
/ 21 февраля 2012

Вы пытались использовать on() вместо mouseover()?

Например: 

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

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