버튼 클릭 내부 자동 완성

Question

각 li 요소 내부에있는 버튼으로 자동 완성 작업을하고있었습니다. 이 버튼을 클릭하면 자동 완성이라는 select 이벤트를 호출하고 싶지 않습니다. 그러나 select 이벤트가 호출되고 있는데, 이에 대한 해결 방법이 있습니까?

FIDDLE

.data("autocomplete")._renderItem = function(ul, item) { 
    var li= $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a style='text-align:left' href='google.com'> <span>"+item.label+"</span><input class='prod-list-addbtn' value='ADD' type='button' style='position: relative;top: 6px;'></a>") 
.appendTo(ul); 
    return li; 
} 

$(document).delegate('ul .prod-list-addbtn', 'click', function (e) { 
        e.stopPropagation(); 
        e.preventDefault(); 
    alert('dont call select of autocomplete, but still called'); 
        return false; 
    }); 

Answer 1

<li class="ui-menu-item" role="menuitem"><a style="text-align:left" href="google.com" class="ui-corner-all" tabindex="-1"> <span>Tommy Smith</span></a><input class="prod-list-addbtn" value="ADD" type="button" style="position: relative;top: 6px;z-index: 400;"></li> 

당신은 리튬 요소가 아닌 a 요소에 입력 요소를 넣을 수 있습니다. 이 방법으로 당신은 여기 변경 -----

var li= $("<li></li>") 
      .data("item.autocomplete", item) 
    .append("<a style='text-align:left;float:left' href='google.com'> <span>"+item.label+"</span></a><input class='prod-list-addbtn' value='ADD' type='button' style='position: relative;top: 6px;float:left'>") 
.appendTo(ul);