내 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> 

UPDATE 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

당신이 사용할 수있는 자바 스크립트 디버거를 그래서 구글 크롬과 F12 키를 눌러 그것을 실행 해보십시오. [Console] 탭을 사용하여 오류가 발생하는지 확인하십시오. 당신이 이걸로 배울 수 있고, JavaScript가 무대 뒤에서 무엇을하고 있는지에 대한 놀라운 사실!

Answer 2

귀하의 .field에 hover 처리기를 한 번만 추가하면됩니다. .field을 AJAX를 통해로드하여 변경하면 이벤트 핸들러가없는 다른 요소가됩니다.

새 .field을로드 한 후 hover 이벤트 처리기를 연결하십시오.

또는

사용 위임 이벤트 핸들러.

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