jquery autocomplete on element retrieved w/ ajax

问题

I am using a simple jquery autocomplete script to search for colleges in a text field. This same script works on another page. On the page in question though, I retrieve the form with an ajax call and it's not working. Did I forget something or is there an issue binding the autocomplete event to the when it is inserted in the DOM?

AJAX Markup:

<input type="text" class="alumni" name="alumni0" id="alumni0" value="Academy College">

Script:

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" rel="stylesheet" />
    <script type="text/javascript" language="javascript">
        var availableTags;
        $(function() {
            availableTags = ["A T Still University of Health Sciences", ... ,"Abilene Christian University"];
            $(".alumni").autocomplete({
                source: availableTags
            });
        });
    </script> 

回答1:

Try rebinding the autocomplete event when you add the new form to the dom. More than likely what is happening is since autocomplete isn't attached with the jquery live function your new elements just don't have the event attached.

来源：https://stackoverflow.com/questions/5407956/jquery-autocomplete-on-element-retrieved-w-ajax