如何将新的动态内容添加到我的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');