title: Why I'm getting the jQuery error "TypeError: $(...).live is not a function " in following scenario?
body: <p>Actually I'm trying to implement the autocomplete functionality to one text field but getting the above error, couldn't understand why I'm getting this error. Can you help me in resolving this error? For your reference I'm providing all the necessary code below:</p>
  
  <p>report-student-result.tpl</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="{$control_css_url}ui-lightness/jquery-ui-1.10.3.custom.css"&gt;  
  &lt;link rel="stylesheet" type="text/css" href="{$control_css_url}autocomplete.css"&gt;
  &lt;label&gt;Name&lt;/label&gt;
              &lt;div class="form-element" id="friends"&gt;
                &lt;input type="text" class="" name="user_name" id="user_name" value="{$user_name}" /&gt;
              &lt;/div&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
  $(function(){  
  
    var class_id = $('#class_id').val();
    var section_id = $('#section_id').val();
  
          //attach autocomplete  
          $("#user_name").autocomplete({  
  
              //define callback to format results  
              source: function(req, add){  
  
                  //pass request to server  
                  $.getJSON("report_student_result.php?callback=?op=get_student_names&amp;class_id="+class_id+"&amp;section_id="+section_id, req, function(data) {  
  
                      //create array for response objects  
                      var suggestions = [];  
  
                      //process response  
                      $.each(data, function(i, val){                                
                      suggestions.push(val.name);  
                  });  
  
                  //pass array to callback  
                  add(suggestions);  
              });  
          },  
  
          //define select handler  
          select: function(e, ui) {  
  
              //create formatted friend  
              var friend = ui.item.value,  
                  span = $("&lt;span&gt;").text(friend),  
                  a = $("&lt;a&gt;").addClass("remove").attr({  
                      href: "javascript:",  
                      title: "Remove " + friend  
                  }).text("x").appendTo(span);  
  
                  //add friend to friend div  
                  span.insertBefore("#user_name");  
              },  
  
              //define select handler  
              change: function() {  
  
                  //prevent 'to' field being updated and correct position  
                  $("#user_name").val("").css("top", 2);  
              }  
          }); 
          //add click handler to friends div  
          $("#friends").click(function(){  
  
              //focus 'to' field  
              $("#user_name").focus();  
          });  
  
          //add live handler for clicks on remove links  
          $(".remove", document.getElementById("friends")).live("click", function(){  
  
              //remove current friend  
              $(this).parent().remove();  
  
              //correct 'to' field position  
              if($("#friends span").length === 0) {  
                  $("#user_name").css("top", 0);  
              }                 
          });                      
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Please help me out to resolve this error. Thanks in advance.</p>