Question

一旦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>

Answer 1

在事件Sys.WebForms.PageRequestManager.getInstance（）重新绑定jquery事件.add_endRequest（endRequestHandler）

<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()

jquery自动完成文本框不能与更新面板一起使用

1 个答案: