如何在刷新的 DIV 中重新初始化 JQuery 自动完成功能？答案

【问题标题】：how to re-init JQuery autocomplete in a refreshed DIV?如何在刷新的 DIV 中重新初始化 JQuery 自动完成功能？
【发布时间】：2012-11-22 09:21:30
【问题描述】：

我有 DIV，里面有一个从 JQuery 示例复制的自动完成小部件：http://jqueryui.com/resources/demos/autocomplete/default.html

按下按钮时，DIV 的内容被新的 HTML 替换，HEADER 包含动态生成的 Javascript 以初始化自动完成

<head> .. 
<script>
$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

我的问题是：$(function()) 在 DIV 的后续重新加载时未评估 == 自动完成不起作用。

意外惊喜，DIV 没有“就绪”事件

请告知如何重新初始化自动完成代码。

主页面包含一个 PROJECT 选择器，在更改时将重新加载 DIV，其中包含动态生成的详细信息，包括自动完成小部件。

<html>
 <head>
  <script>
   function refresh_div() {
    ..    
    document.getElementById(DYNA_DIV).innerHTML = self.xmlHttpReq.responseText;
   }
  </script>
 </head>
<body>
 <select id=PROJECT_ID onchange="refresh_div()" ..>
 <div id="DYNA_DIV"> ..here is dynamically generated form with autocomplete widget containing items related to the PROJECT selected above</div>
</body>
</html>

DIV 的 HTML 如下所示。按照建议剥离 HTML、HEAD、BODY

首先加载自动完成功能。刷新 DIV 的内容时，下面的初始化脚本不运行

  ..  <input type="text" name="AUTOCOMP"> ..

 <script>
    $(function() {
        var availableItems = [ <% dynamically enumerate items for PROECT_ID %> ];

        $( "#AUTOCOMP" ).autocomplete({
            source: availableItems
        });
    });    

  </script>

-亚历克斯

【问题讨论】：

如果你要替换一个div的内容，你能不能把自动完成代码放在文档根目录的函数中，然后在你的代码更新后重新实例化它的内容div？

标签： jquery jquery-autocomplete

【解决方案1】：

您是否将DIV 的内容替换为完整的 HTML 树

<html>
  <head>
    <script>...

如果是，那么除非您通过创建 IFRAME 元素来包含此新树，否则浏览器会忽略您的内容。你应该只输出你想放在DIV 中的内容（没有标签：HTML、HEAD 和所有它的标签，BODY）并且只包括你的BODY 里面的内容。如果您需要的话，您还可以在 BODY 中包含 SCRIPT。

更新：

更新问题后，我看到一个错误。也许这只是问题的错误，但让我们试试：

你有"#AUTOCOMP" 选择器，但你有<input type="text" name="AUTOCOMP">。如果这就是您的内容的样子，那么您应该通过'input[name="AUTOCOMP"]' 选择器选择输入。

【讨论】：

是的，如果您曾经在 DIV 中包含 HTML 标记，则您的标记已经损坏并且在技术上无法验证。听起来好像采取了一种有点骇人听闻的方法。可能最好让按钮按下触发 AJAX 请求以获取数据，然后在完成后重新初始化自动完成。
试图只回复 ..
，没有帮助
@TothAlexandru 你能确认新获取的 SCRIPT 标记中的函数已执行吗？尝试在其中添加 console.info 调用，如果你看到任何东西，请检查 Firebug/Chrome Inspector/Opera Dragonfly。这样您还可以检查您的选择器 ($("#AUTOCOMP")) 是否正确选择了新元素而不是旧元素。
Javascript 在第一次加载时只执行一次。所以它正确选择了输入字段。

【解决方案2】：

尝试将代码包装在add_load：

Sys.Application.add_load(function () {

    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });

});

【讨论】：

Sys.Application.add_load 即使在第一次加载时也不起作用