実際には、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+"§ion_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>
このエラーの解決を手伝ってください。前もって感謝します。
live()
はバージョン1.9以降削除され、1.7以降廃止されました。
on()
がすぐに必要になります
_$('#friends').on("click", ".remove", document.getElementById("friends"), function(){
_
ここで、_#friends
_はDOMの準備ができています。動的に読み込まれた要素にon()
をバインドすることはできません。
.on()
の代わりに.live()
を使用できます(Jquery 1.7以降は非推奨)
$(document).on('event', 'selector', function() {});
は.live()
を置き換えます。
例えば:
$( document ).on( "click", "#elementId ", function(){ alert( "Do here what you want!" ); // jQuery1.7+ });
Live()は1.9以降jqueryから削除されました。 on
を使用してください