jQuery自动完成不适用于重新渲染的文本字段

Question

Im having a problem getting jequery autocomplete to work for rerendered textfields.

I have a a4j:commandlink to show some more inputfields in my form, when this is clicked I reRender an outer a4j:outputpanel to reRender the contents. But to my surprise, the jQuery autocomplete event is never fired for a reRendered textfield I have. It is working as expected before the reRender. The textfield gets autocomplete based on its id, from google maps like this:

jQuery(document).ready(function(){
    jQuery("#createActivityAddressInputId").autocomplete({
    //This bit uses the geocoder to fetch address values
    ...
});
}

<a4j:outputPanel id="createActivityPanel">
    ...
    <h:inputText id="#{GUIComponentIds.createActivityAddressInputId}" value="#"
        {activityRequestBean.newActivityAddress}" />
    <a4j:commandLink value="#{msg.createActivityShowmapLabel}" 
        oncomplete="onShowMapPanel()" action="#{activityRequestBean.showMapClicked}" 
        rendered="#{!activityRequestBean.showMap}" 
        reRender="createActivityMapPanel,createActivityPanel" />
    ...
</a4j:outputPanel>

I was thinking that this maybe had something to do with the autocomplete event is hooked up on document load, or am I way off here?

Thanks!

Answer 1

Yes; you will need to re-attach the autocomplete by calling the same method every time you re-render. (Presumably you would cache the options that you pass to autocomplete.)

Something like:

var autocompleteOptions = null;
$(function ()
{
   autocompleteOptions = getFromGeocoder();
});

function onReRender()
{
   $("#createActivityAddressInputId").autocomplete(autocompleteOptions);
}

Then call onReRender whenever you rerender the control.

Answer 2

You need to execute your jQuery after the element has been reRendered. Or you can try to bind jQuery event on every element even if added to the DOM later than jQuery(document).ready().

edit: changed the live method call edit: removed code example because it was just wrong