jQuery 및 jQueryui 자동 완성으로 추가 요소 제거

Question

jqueryui 자동 완성 을 사용하여 요소를 추가하려고했지만 추가 된 요소를 제거 할 수 없습니다. 어떻게하면됩니까?

$(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(); 
    }); 
    }); 

와 바이올린 http://jsfiddle.net/D98z9/

Answer 1

.live이 버전 1.9에서 버전 1.7에서 사용되지 않으며 제거

<input id="project"> 
<input type="hidden" id="project-id"> 

<h3>Result</h3> <ol id="result" class='lists'></ol> 

여기 내 HTML 소스 대신 .on()를 사용할 수 있습니다.

그 외에도 앵커가 동적으로 추가되었으므로이를 바인딩 할 때까지 클릭 이벤트를 사용할 수 없습니다.

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

Updated Fiddle

:이 경우 event delegation를 사용할 수있다