Why I'm getting the jQuery error "TypeError: $(...).live is not a function " in following scenario?

Question

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:

report-student-result.tpl

<link rel="stylesheet" type="text/css" href="{$control_css_url}ui-lightness/jquery-ui-1.10.3.custom.css">  
<link rel="stylesheet" type="text/css" href="{$control_css_url}autocomplete.css">
<label>Name</label>
            <div class="form-element" id="friends">
              <input type="text" class="" name="user_name" id="user_name" value="{$user_name}" />
            </div>

<script language="javascript" type="text/javascript">
$(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&class_id="+class_id+"&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 = $("<span>").text(friend),  
                a = $("<a>").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);  
            }                 
        });                      
    });

</script>

Please help me out to resolve this error. Thanks in advance.

Answer 1

live() has been removed since version 1.9 and was deprecated since 1.7:

You'll be wanting on() now days

$('#friends').on("click", ".remove", document.getElementById("friends"), function(){  

where #friends is available on DOM ready. You can't bind on() on a dynamical loaded element.