JQuery自动完成按钮/链接单击不起作用

我有下面的代码，在单击按钮时调用jquery JSON自动完成。它只在第一次按预期工作，当我单击命令链接时会调用autocomplete，但下一次当我开始在文本框中键入时（在单击命令链接之前），会触发autocomplete。当我刷新页面时，它再次起作用-仅当单击链接时调用autocomplete

<ui:component>
    <tr:panelGroupLayout>
        <tr:inputText id="#{id}" value="#{value}">
        </tr:inputText>

    <tr:commandLink id="idGlobalTrigger" partialSubmit="true">
        <tr:image source="/resources/images/tick_light.gif"></tr:image>
    </tr:commandLink>
    </tr:panelGroupLayout>
    <script>
    $("#idGlobalTrigger").click(function() {
    /*text box id   */                  
        var jqueryObj = "#"+"#{id}";    
        $(jqueryObj).autocomplete({
                source : function(request, response) {                      
                    $.ajax({
                        type : "GET",
                        url : "#{facesContext.externalContext.requestContextPath}/GlobalServlet",
                        data : {
                            term : request.term
                        },
                        dataType : "json",
                        success : function(
                                data) {
                            response(data);
                        },
                        error : function(
                                XMLHttpRequest,
                                textStatus,
                                errorThrown) {
                            // alert('Error1'+textStatus +textStatus);
                        }
                    });
                }
            });

            $(jqueryObj).focus();
            $(jqueryObj).autocomplete("search");
         });
    </script>
</ui:component>

$（“#idGlobalTrigger”）。单击（函数（）{
/*文本框id*/
var jqueryObj=“#”+“#{id}”；
$（jqueryObj）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
键入：“获取”，
url:“#{facesContext.externalContext.requestContextPath}/GlobalServlet”，
数据：{
期限：request.term
},
数据类型：“json”，
成功：功能(
（数据）{
答复（数据）；
},
错误：函数(
XMLHttpRequest，
文本状态，
错误（抛出）{
//警报（'Error1'+textStatus+textStatus）；
}
});
}
});
$（jqueryObj.focus（）；
$（jqueryObj）.autocomplete（“搜索”）；
});

尝试将自动完成逻辑包装到函数中，并在document.ready上调用该函数

 $(document).ready(function() {
    autocomplete()
    });

function autoComplete(){
//logic here
};

---

听起来你可能在让你的听众变得复杂。换句话说，在单击时而不是在页面加载时调用autoComplete函数（这是前面提到的最佳实践）意味着每次用户单击元素时都会添加另一个相同的侦听器

每次单击元素时，您都需要清除所有以前的侦听器，以防止它们“堆积”。尝试使用以下代码段更新代码：

 $("#idGlobalTrigger").off("click").on("click",function() {

---

我重新初始化“选择时自动完成”事件。这就解决了我的问题

$(jqueryObj).on("autocompleteselect", function(event,ui) {          
        $(jqueryObj).autocomplete({
            source : null,
            response: function( event, ui ) {
                ui.content.push({value:'', id:0, label:''});
            } 
        }); 

---

谢谢你的建议，但这不起作用。你有没有检查文档，看看是否有一个“重新初始化”功能可以调用？在文档中，我看到了这些选项，我认为可能与重新初始化“销毁、禁用、启用、实例”有关。在我开始自动完成之前或之后，我使用了一个或多个组合，但没有任何帮助。为什么你不能像前面提到的那样在页面加载时初始化？元素是异步加载的吗？@BWDesin，我不理解这个概念。我只需点击一个按钮就可以完成自动完成呼叫。