Question

我尝试使用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/

Answer 1

.live已从版本1.7弃用，已在版本1.9中删除，您可以改为使用.on()。

除此之外，因为您的锚已经动态添加，所以在您绑定它之前，click事件将不可用于这些元素。在这种情况下，您可以使用 event delegation ：

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

<强> Updated Fiddle

使用jQuery和jQueryui自动完成删除附加元素

1 个答案: