jquery自动完成文本框不适用于更新面板答案

【问题标题】：jquery auto complete textbox is not working with update paneljquery自动完成文本框不适用于更新面板
【发布时间】：2015-06-10 08:13:32
【问题描述】：

更新面板在 jquery 卸载后更新如何重新加载。如何使用更新面板克服 jquery

          <!doctype html>
        <html lang="en">
          <head>
           <meta charset="utf-8">
            <title>jQuery UI Autocomplete - Custom data and display</title>
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
           <script src="http://code.jquery.com/jquery-1.11.2.js"></script>
           <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

 <script>
  $(function () {
      var projects = [
  { "label": "AN-01", "actor": "Port Blair " },
  { "label": "AN-02", "actor": "Car Nicobar " },
  { "label": "AP-01", "actor": "Adilabad / Mancherial / Nirmal" },
  { "label": "AP-02", "actor": "Anantapur " },
  { "label": "AP-03", "actor": "Chittoor " },
  { "label": "AP-04", "actor": "Kadapa " },
  { "label": "AP-05", "actor": "East Godavari " },
  { "label": "AP-06", "actor": "Kakinada / Amalapuram / Rajahmundry" },
  { "label": "AP-07", "actor": "Guntur " }
      ];

      $("#lstRTO").autocomplete({
          source: projects,
          select: function (event, ui) {
              $("#lstRTO").val(ui.item.label);
              return false;
          }
      })
      .autocomplete("instance")._renderItem = function (ul, item) {
          return $("<li>")
            .append("<a><strong>" + item.label + "</strong> / " + item.actor + "</a>")
            .appendTo(ul);
      };
  });
 </script>
</head>
<body >
 <asp:ScriptManager runat="server"></asp:ScriptManager>
 <asp:UpdatePanel ID="UpdatePanel24" runat="server" UpdateMode="Always">
                                            <ContentTemplate>
    <asp:TextBox ID="lstRTO" runat="server" ClientIDMode="Static" CssClass="form-control wid-mob lim-size" type="text" MaxLength="5" max="5" placeholder="RTO Code"></asp:TextBox>
   </ContentTemplate>
                                        </asp:UpdatePanel>

   </body>
        </html>

【问题讨论】：

更新面板在更新时替换了更新面板的内容，这意味着您在更新面板中有新内容。所以解决办法是重新绑定jQuery事件。

标签： javascript jquery html asp.net

【解决方案1】：

在事件 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler) 处重新绑定 jquery 事件

<script type="text/javascript">
        $(function () {
            initializer();
        });


        var prmInstance = Sys.WebForms.PageRequestManager.getInstance();


        prmInstance.add_endRequest(function () {
            //you need to re-bind your jquery events here
            initializer();
        });
        function initializer() {
          var projects = [
  { "label": "AN-01", "actor": "Port Blair " },
  { "label": "AN-02", "actor": "Car Nicobar " },
  { "label": "AP-01", "actor": "Adilabad / Mancherial / Nirmal" },
  { "label": "AP-02", "actor": "Anantapur " },
  { "label": "AP-03", "actor": "Chittoor " },
  { "label": "AP-04", "actor": "Kadapa " },
  { "label": "AP-05", "actor": "East Godavari " },
  { "label": "AP-06", "actor": "Kakinada / Amalapuram / Rajahmundry" },
  { "label": "AP-07", "actor": "Guntur " }
      ];

      $("#lstRTO").autocomplete({
          source: projects,
          select: function (event, ui) {
              $("#lstRTO").val(ui.item.label);
              return false;
          }
      })
      .autocomplete("instance")._renderItem = function (ul, item) {
          return $("<li>")
            .append("<a><strong>" + item.label + "</strong> / " + item.actor + "</a>")
            .appendTo(ul);
      };


        }


    </script>

更多详情请参考_endRequest()

【讨论】：

同样的问题是违反stackoverflow.com/questions/30755104/…