javascript - 服务器端按钮单击事件未在 UpdatePanel 内触发

Question

我有一个正在使用 updatepanel 的用户控件。当页面首次加载时，按钮单击工作正常，并且显示在 DIV 中...当我再次搜索并单击按钮时，单击事件没有触发，甚至页面加载事件也没有触发。当您输入邮政编码时，我正在使用谷歌地理编码查找最近的商店。我怀疑是 JavaScript 或页面验证不允许按钮触发单击事件。这是我的代码。

ASPX 页面

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ClickAndCollect.ascx.cs"
      Inherits="ConLib_Custom_ClickAndCollect" %>
<%@ Register Assembly="CommerceBuilder.Web" Namespace="CommerceBuilder.Web.UI.WebControls"
      TagPrefix="cb" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script src="/js/ClickAndCollectGeoCoding.js" type="text/javascript"></script>
 <asp:UpdatePanel ID="ClickAndCollectUpdatePanel" runat="server" UpdateMode="Always">
      <ContentTemplate>
        <div class="ClickAndCollectPanelTitle">
            Click and Collect
            <p>
                  Your order will be available to collect in store in 24 - 72 hours
                  <br />
                  We will email you as soon as your order is ready for collection
            </p>
        </div>
         <div class="errorPostcodeSummaryDiv">
              <asp:Label ID="errorPostcodeSummary" Text="" runat="server" Visible="false" CssClass="errorPostcodeSummary">
              </asp:Label>
         </div>        
        <div class="ClickAndCollectContainer">
                <div class="ClickAndCollectContents">
                    <div class="ClickAndCollectHeader">
                        <asp:Label ID="ClickAndCollectDesc" runat="server" Text="Find your nearest store" CssClass="ClickAndCollectDesc"></asp:Label>
                        <asp:TextBox ID="ClickAndCollectTextBox" runat="server" Text="" ToolTip="Enter Your Postcode" CssClass="ClickAndCollectTextBox"></asp:TextBox>
                        <ajax:TextBoxWatermarkExtender ID="ClickAndCollectTextWatermark" runat="server" TargetControlID="ClickAndCollectTextBox" WatermarkText="Postcode or Town" WatermarkCssClass="watermark"></ajax:TextBoxWatermarkExtender>

                        <asp:Button ID="ClickAndCollectSubmit" runat="server" CssClass="ClickAndCollectSubmit" Text="Find Stores" onClick= "ClickAndCollectSubmit_Click"/>
                        <asp:RequiredFieldValidator ID="ClickAndCollectTextBoxValidator" runat="server"  ValidationGroup="OPC"
                                ControlToValidate = "ClickAndCollectTextBox" CssClass="ClickAndCollectValidatorError"
                                ErrorMessage = "Please enter valid address to search for the nearest stores." Text="*">
                                </asp:RequiredFieldValidator>
                    </div>
                    <div class="ClickAndCollectResult">
                        <asp:Panel ID="ClickAndCollectResultPanel" Visible="false" CssClass="ClickAndCollectResult"
                            runat="server">
                            <div class="ClickAndCollectResultHeader">
                                Choose your nearest store
                            </div>
                            <div class="ClickAndCollectResultTable">
                                <asp:RadioButtonList ID="StoresRadioList" Visible="false" runat="server" ToolTip="Choose your nearest store" CssClass="ClickAndCollectResultRadios" ValidationGroup="OPC" onselectedindexchanged="StoresRadioList_SelectedIndexChanged" AutoPostBack="true">
                                </asp:RadioButtonList>
                                <asp:RequiredFieldValidator ID="StoresRadioValidator" runat="server"  ControlToValidate = "StoresRadioList"  Text ="*" CssClass="ClickAndCollectValidatorError" ErrorMessage = "Please choose one store for your delivery.">
                                </asp:RequiredFieldValidator>
                            </div>
                        </asp:Panel>
                    </div>
                    <div class="selectedAddress">
                        <asp:PlaceHolder ID="selectedStore" runat="server"></asp:PlaceHolder>
                    </div>
                    <asp:HiddenField ID="latValue" runat="server"/>
                    <asp:HiddenField ID="lanValue" runat="server"/>
                    <asp:HiddenField ID="statusCode" runat="server"/>
                </div>
            </div>
         </ContentTemplate>
</asp:UpdatePanel>

JS 文件

var address;
var region;

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args) {
      if (args.get_error() == undefined) {
            AttachEventAfterPostback();
      }
}

function AttachEventAfterPostback() {
      $(document).ready(function () {
            address = $('.ClickAndCollectTextBox').val();
            if (address.length != 0) {
                  checkAddress(address);
                  getLatLong(address, region);

            }
            $('.ClickAndCollectTextBox').on('blur', function () {
                  address = $('.ClickAndCollectTextBox').val();
                  if (address.length != 0) {
                        checkAddress(address);
                        getLatLong(address, region);
                  }
            });
      });
}

function getLatLong(address, region) {
            var geocoder = new google.maps.Geocoder();
            var result = "";
            geocoder.geocode({
                  'address': address,
                  'region': region
            }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                        $("[id$='statusCode']").val("OK");
                        $("[id$='latValue']").val(results[0].geometry.location.lat());
                        $("[id$='lanValue']").val(results[0].geometry.location.lng());
                        //                        if (typeof (callback) == "function") {
                        //                              callback();
                        //                        }
                  } else {
                        $("[id$='statusCode']").val("ZERO_RESULTS");
                        $("[id$='latValue']").val("0");
                        $("[id$='lanValue']").val("0");
                  }
            });
      }

AttachEventAfterPostback();

function checkAddress(inputAddress) {
      switch (inputAddress.toUpperCase()) {
            //some code
      }
}

*编辑***

“我正在做的是，一旦用户输入邮政编码和文本框失去焦点，我就会调用地理编码以在隐藏字段中准备好 LAT 和 LNG 值。一旦用户单击，单击事件就会在服务器上触发并显示结果使用 RadiobuttonList。一旦用户选择一个 radio ，一个 div 就会显示他们选择的商店的详细信息。现在假设他们不选择一个 radio 并尝试输入差异邮政编码，则单击按钮不起作用。但是如果他们选择一个 radio ，然后尝试比较邮政编码，单击按钮效果很好..

任何人都知道为什么会发生这种情况......

Answer 1

您附加事件的方式错误。

更新面板会进行部分页面回发，并且在您手动刷新页面之前永远不会处于文档就绪状态。

删除 AttachEventAfterPostback 并在 pageLoad 函数中编写代码，如下所示，这将在每次部分回发后自动重新绑定(bind)所有内容

function pageLoad(sender,args){
    address = $('.ClickAndCollectTextBox').val();
    if (address.length != 0) {
       checkAddress(address);
       getLatLong(address, region);

    }
    $('.ClickAndCollectTextBox').on('blur', function () {
       address = $('.ClickAndCollectTextBox').val();
          if (address.length != 0) {
              checkAddress(address);
              getLatLong(address, region);
          }
       });
}