удалить добавленный элемент с автозаполнением jQuery и jQueryui

0

Я попытался добавить элемент с помощью 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/

Теги:

1 ответ

0
Лучший ответ

.live устарел от версии 1.7 и удален в версии 1.9, вы можете использовать вместо .on().

Кроме того, поскольку ваш якорь добавлен динамически, событие click не будет доступно для этих элементов, пока вы его не свяжете. В этом случае вы можете использовать делегирование событий:

$("body").on("click",'.remove',function() {
    $(this).parent("li").remove();
});

Обновленный скрипт

Ещё вопросы

Сообщество Overcoder
Наверх
Меню