Я попытался добавить элемент с помощью jqueryui autocomplete, но я не могу удалить добавленный элемент. Как я могу это сделать?
$(function() {
var products = [
{ "sn":"P00101","label":"Product 1"},
{ "sn":"P00102","label":"Product 2"},
{ "sn":"P00103","label":"Product 3"},
{ "sn":"P00104","label":"Product 4"}
]
$( "#project" ).autocomplete({
minLength: 0,
source: products,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.sn );
$("<li>").html("["+ui.item.sn+"] "+ui.item.label+"<input type=text size=5><a href='#' class='remove'>Remove</a>").appendTo("#result");
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>[" + item.sn + "] " + item.label + "</a>" )
.appendTo( ul );
};
$(".remove").live("click",function() {
$(this).parent("li").remove();
});
});
и мой html-источник здесь
<input id="project">
<input type="hidden" id="project-id">
<h3>Result</h3> <ol id="result" class='lists'></ol>
скрипка http://jsfiddle.net/D98z9/
.live
устарел от версии 1.7
и удален в версии 1.9
, вы можете использовать вместо .on()
.
Кроме того, поскольку ваш якорь добавлен динамически, событие click не будет доступно для этих элементов, пока вы его не свяжете. В этом случае вы можете использовать делегирование событий:
$("body").on("click",'.remove',function() {
$(this).parent("li").remove();
});