web-dev-qa-db-ja.com

次のシナリオでjQueryエラー「TypeError：$（...）。live is not a function」が発生するのはなぜですか？

実際には、1つのテキストフィールドにオートコンプリート機能を実装しようとしていますが、上記のエラーが発生したため、このエラーが発生する理由を理解できませんでした。このエラーの解決を手伝っていただけますか？参考までに、以下に必要なコードをすべて提供します。

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>

このエラーの解決を手伝ってください。前もって感謝します。

javascriptjquery-autocompletejquery
16
PHPLover

live() はバージョン1.9以降削除され、1.7以降廃止されました。

on()がすぐに必要になります

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

ここで、_#friends_はDOMの準備ができています。動的に読み込まれた要素にon()をバインドすることはできません。

27
Jamie Hutber

.on()の代わりに.live()を使用できます（Jquery 1.7以降は非推奨）

$(document).on('event', 'selector', function() {});は.live()を置き換えます。

例えば：

$( document ).on( "click", "#elementId ", function(){  alert( "Do here what you want!" );  // jQuery1.7+    });
6
Ajinder Singh

Live（）は1.9以降jqueryから削除されました。 onを使用してください

1
Scary Wombat