如何將新的動態內容添加到我的JS代碼？

Question

我一直在開發一個簡單的頁面，並有問題 - 我的頁面包含一個2列的表;如果用戶將光標移動到第二列，它將在可編輯字段中轉換，用戶可以編輯它並執行一些操作。該頁面還包含分頁鏈接;如果用戶點擊鏈接，例如「2」，那麼表格會使用Ajax/Jquery動態地改變它的內容。因此，我的代碼適用於初始屏幕，但是如果我更改頁面，則無法編輯第二列中的任何字段，即編輯代碼現在不起作用。所以，請告訴我，我該如何解決？ JS代碼：

<script type="text/javascript" charset="utf-8"> 

    function hide_info_block(block_id) { 
     $('#info_block').hide(); 
    } 

    $(function() 
    {   
     var old_value='No translate'; 
     var item_id=''; 
     var item; 

     $('.field').hover(
     function() 
     { 
      old_value=$(this).text(); 
      item_id=$(this).attr('id'); 
      item=$(this).parent('td'); 
      new_value=(old_value=='Not translated') ? '' : old_value; 

      $(this).empty(); 
      var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+ 
       "<div style='overflow: hidden; padding-right: .5em;'>"+ 
       "<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>"; 
      $(this).html(field); 
     }, 
     function() 
     { 

      $(this).empty(); 
      $(this).html(old_value); 
     }); 

     $('#save_button').live('click', function() { 
      if ($.trim($('#new_value').val()).length==0) 
      { 
       alert ('The string is empty'); 
       return; 
      } 

      var loader="<td><img id='small_loader' style='position:absolute' src='/small_loader.gif' /></td>"; 
      item.after(loader); 
      var old_val=old_value; 
      var new_val=$.trim($('#new_value').val()); 

      $.post("http://"+document.location.host+"/index.php/welcome/update_record", { old_value: old_val, 
       value: new_val, id: item_id} , 
      function(data) { 
       var message="Message"; 
       var json = jQuery.parseJSON(data); 
       var item_id=json.id.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1"); 
       if (json.result=='LOGIN') { 
        message="You need to enter before making any actions"; 
        $('#'+item_id).html(json.old_value); 
       } 
       else { 
        if (json.result=='OK') { 
         $('#'+item_id).css('color', '#000000'); 
         message="Your correction has been added successfully"; 
         $("#"+item_id).html(json.language_value); 
        } 
        else { 
         message="Your correction has been updated successfully"; 
         $('#'+item_id).html(json.language_value); 
        } 
       } 
       $('#small_loader').remove(); 
       alert(message); 
      }); 
     }); 

     $('.page_button').live('click',function() { 

      $('#ajaxBusy').show(); 
      $('.selected_page_button').attr('class','page_button'); 
      $(this).attr('class','selected_page_button'); 
      $.post("http://"+document.location.host+"/index.php/welcome/update_records_set/"+this.id, 
      function(data) 
      { 
       if (data != "") 
       { 
        $(".records_content:last").empty(); 
        $(".records_content").html(data);   
       } 
       $('#ajaxBusy').hide(); 
      }); 
     }); 
    });     
</script> 

表代碼：

   <div class="records_content"> 
       <table> 
        <tbody> 
         <?php 
          $i=0; 
          foreach ($records as $record) { 
           //echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>"; 
           echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>"; 
           echo "<td width='400'>" . strip_tags($record['translate']['language_value']) . "</td>"; 
           if ($record['translate']['coalesce(loc.language_value)']) 
           { 
            echo "<td width='200' height='30'><div class='field' id='".$record['translate']['label_value']."/".$record['language_id']."'>". 
             strip_tags($record['translate']['coalesce(loc.language_value)'])."</div>"; 
            if (count($record['alternatives'])) 
            { 
             echo "<br/><b>Alternatives:</b>"; 
             echo "<ul>"; 
             foreach ($record['alternatives'] as $alternative) 
             { 
              echo "<li>".strip_tags($alternative['coalesce(loc.language_value)'])."</li>"; 
             } 
             echo "</ul>"; 
            } 
           } 
           else 
           { 
            echo "<td width='200'>"."<div class='field' style='font-style: italic; color: #FF0000' id='".$record['translate']['label_value']."/".$record['language_id']."'>Not translated</div>"; 
            if (count($record['alternatives'])) 
            { 
             echo "<br/><b>Alternatives:</b>"; 
             echo "<ul>"; 
             foreach ($record['alternatives'] as $alternative) 
             { 
              echo "<li>".strip_tags($alternative['coalesce(loc.language_value)'])."</li>"; 
             } 
             echo "</ul>"; 
            } 
           } 
           echo "</td>"; 
           $i++; 
          } 
         ?> 

        </tbody> 
       </table> 
       </div> 

更新2：

 $('body').on({ 
     mouseenter: function(event) 
     { 
      old_value=$(this).text(); 
      item_id=$(this).attr('id'); 
      item=$(this).parent('td'); 
      new_value=(old_value=='Not translated') ? '' : old_value; 

      $(this).empty(); 
      var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+ 
       "<div style='overflow: hidden; padding-right: .5em;'>"+ 
       "<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>"; 
      $(this).html(field); 
     }, 
     mouseleave: function(event) 
     { 

      $(this).empty(); 
      $(this).html(old_value); 
     }}, '.field'); 

Answer 1

嘗試運行它在谷歌Chrome和按F12鍵，以便您有可用的JavaScript調試器。使用[控制檯]標籤查看是否有錯誤發生。令人驚訝的是，您可以從中學到什麼，以及JavaScript在幕後做了什麼！

Answer 2

您只需將hover處理程序添加到您的.field一次。當您通過AJAX加載更改.field時，它將成爲不帶任何事件處理程序的不同元素。

在加載新的.field後附加hover事件處理程序。

或

使用委託事件處理程序。

$('body').on({ 
mouseenter: function() { 
    //code when mouse enters .field 
}, 
mouseleave: function() { 
    //code when mouse leaves .field 
} 
}, '.field');