按钮单击自动完成内部

时间:2014-11-14 06:19:20

标签: javascript jquery html autocomplete

我正在使用每个li元素内的按钮进行自动完成。单击此按钮时,我不想调用自动完成的选择事件。但是正在调用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;
   });

1 个答案:

答案 0 :(得分: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>

您可以将input元素放入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);